Comment créer : mise en page de deux colonnes

Comment créer une mise en page de deux colonnes

Première étape - Ajouter HTML :

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

Deuxième étape - Ajouter CSS :

Dans cet exemple, nous allons créer deuxÉgalesdes colonnes :

Exemple de flot

.column {
  float: left;
  width: 50%;
}
/* Nettoyer le flot après les colonnes */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Essayer par vous-même

La méthode moderne de création de mise en page de deux colonnes est l'utilisation de CSS Flexbox. Cependant, il n'est pas pris en charge par Internet Explorer 10 et versions antérieures.

Exemple Flex

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

Essayer par vous-même

Vous pouvez choisir d'utiliser le flot ou flex pour créer une mise en page de deux colonnes. Cependant, si vous devez prendre en charge Internet Explorer 10 et versions antérieures, vous devriez utiliser le flot.

Astuce :Pour en savoir plus sur le module Flexible Box Layout, lisez notre Tutoriel CSS Flexbox。

Dans cet exemple, nous allons créer deux colonnes de largeur inégale :

Exemple

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

Essayer par vous-même

Dans cet exemple, nous allons créer unRéponsiveMise en page de deux colonnes :

Exemple

/* Mise en page réactive - Lorsque la largeur de l'écran est inférieure à 600px, les deux colonnes s'empilent plutôt que de s'aligner côte à côte */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Essayer par vous-même

Pages associées

Tutoriel :Mise en page de site web CSS

Tutoriel :CSS conception de site web réactif