Come creare: layout a due colonne

Come creare un layout a due colonne

Primo passo - Aggiungi HTML:

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

Secondo passo - Aggiungi CSS:

In questo esempio, creeremo due colonneugualidelle colonne:

Esempio di float

.column {
  float: left;
  width: 50%;
}
/* Pulisci il float dopo le colonne */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Prova tu stesso

Il metodo moderno per creare un layout a due colonne è utilizzare CSS Flexbox. Ma non è supportato da Internet Explorer 10 e versioni precedenti.

Esempio Flex

.row {
  display: flex;
}
.column {
  flex: 50%;
}

Prova tu stesso

Puoi scegliere di utilizzare il float o flex per creare un layout a due colonne. Ma se devi supportare Internet Explorer 10 e versioni precedenti, dovresti utilizzare il float.

Suggerimento:Per ulteriori informazioni sul modulo Layout a Box Flessibile, leggi la nostra Guida CSS Flexbox。

In questo esempio, creeremo due colonne di larghezza diversa:

Esempio

.column {
  float: left;
}
.left {
  width: 25%;
}
.right {
  width: 75%;
}

Prova tu stesso

In questo esempio, creeremo unaResponsiveLayout a due colonne:

Esempio

/* Layout responsive - quando la larghezza dello schermo è inferiore a 600px, i due colonne si sovrappongono invece di essere affiancate */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Prova tu stesso

Pagine correlate

Guida:Layout del sito web CSS

Guida:CSS progettazione web responsive