Comment - Disposition à deux colonnes
Apprenez à créer une grille de mise en page à 2 colonnes avec CSS.
Colonne 1
Du texte..
Colonne 2
Du texte..
Comment créer une mise en page à deux colonnes
Étape 1) Ajoutez du HTML :
Exemple
<div class="row">
<div class="column"></div>
<div
class="column"></div>
</div>
Étape 2) Ajoutez CSS :
Dans cet exemple, nous allons créer deux colonnes égales :
Exemple flottant
.column {
float: left;
width: 50%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
Une façon moderne de créer deux colonnes consiste à utiliser CSS Flexbox . Cependant, il n'est pas pris en charge dans Internet Explorer 10 et les versions antérieures.
Exemple flexible
.row {
display: flex;
}
.column {
flex: 50%;
}
C'est à vous de décider si vous souhaitez utiliser des flotteurs ou des flexibles pour créer une mise en page à deux colonnes. Cependant, si vous avez besoin de support pour IE10 et versions ultérieures, vous devez utiliser float.
Conseil : Pour en savoir plus sur le module de mise en page de la boîte flexible, lisez notre chapitre CSS Flexbox .
Dans cet exemple, nous allons créer deux colonnes inégales :
Exemple
.column {
float: left;
}
.left {
width: 25%;
}
.right {
width: 75%;
}
Dans cet exemple, nous allons créer une mise en page réactive à deux colonnes :
Exemple
/* Responsive layout - when the screen is less than 600px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Conseil : accédez à notre didacticiel sur la mise en page de sites Web CSS pour en savoir plus sur les mises en page de sites Web.
Conseil : accédez à notre didacticiel CSS Responsive Web Design pour en savoir plus sur la conception Web réactive et les grilles.