Come creare: layout a quattro colonne

Come creare un layout a quattro colonne

Primo passo - Aggiungi HTML:

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

Secondo passo - Aggiungi CSS:

In questo esempio, creeremo un layout a quattro colonne:

Esempio

.column {
  float: sinistro;
  larghezza: 25%;
}
/* Pulire il floating dopo le colonne */
.row:after {
  contenuto: "";
  display: tabella;
  clear: both;
}

Prova personalmente

In questo esempio, creeremo unResponsiveLayout a quattro colonne:

Esempio

/* Layout responsivo - Quando la larghezza dello schermo è inferiore a 600px, i tre colonne si sovrappongono 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