Comment créer des colonnes de même hauteur avec Pure CSS ?

Création de colonnes de même hauteur avec CSS

Les colonnes de même hauteur sont essentielles pour créer des mises en page visuellement attrayantes. Bien qu'il existe différentes approches, une méthode efficace consiste à utiliser du CSS pur. Ce tutoriel démystifie la technique, dissipant l'idée qu'il s'agit d'une simple duplication d'autres solutions.

Le défi

Comment pouvons-nous créer des colonnes qui :

• Remplir tout l'espace vertical de leur div parent
• Exposer des hauteurs égales sans compter sur les images d'arrière-plan

Sur la base de recherches approfondies, nous avons découvert une solution unique.

La réponse

Pour une approche simple, adoptez l'astuce CSS suivante :

.parent {
  display: table;
}
.child {
  display: table-cell;
}

Cette astuce exploite les propriétés d'affichage basées sur des tableaux. Lorsque le div parent assume un affichage de tableau, ses divs enfants deviennent des cellules de tableau, héritant d'une hauteur égale.

Exemple

<div class="parent">
  <div class="child">Column 1</div>
  <div class="child">Column 2</div>
  <div class="child">Column 3</div>
</div>

Remarque : IE7 ne fonctionne pas bien avec cette approche, nécessitant une solution plus complexe pour la compatibilité ascendante.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!