Come creare: Layout a tre colonne

Come creare un layout a tre colonne

Primo passo - Aggiungi HTML:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Secondo passo - Aggiungi CSS:

In questo esempio, creeremo treuniformicolonne:

Esempio

.column {
  flottante: sinistra;
  larghezza: 33.33%;
}
/* Pulire il浮动 dopo le colonne */
.row:after {
  contenuto: "";
  display: tabella;
  clear: both;
}

Prova personalmente

In questo esempio, creeremo trenon uniformicolonne:

Esempio

.column {
  flottante: sinistra;
}
.sinistra, .destra {
  larghezza: 25%;
}
.middle {
  larghezza: 50%;
}

Prova personalmente

In questo esempio, creeremo unResponsiveLayout a tre colonne:

Esempio

/* Layout responsivo - Quando la larghezza dello schermo è inferiore a 600px, i tre colonne si accavallano invece di essere affiancate */
@media schermo and (larghezza massima: 600px) {
  .column {
    larghezza: 100%;
  }
}

Prova personalmente

Pagine correlate

Tutorial:Layout del sito web CSS

Tutorial:Progettazione web responsive CSS