Comment obtenir des colonnes de hauteur égale avec Pure CSS ?

Comment créer de véritables colonnes de même hauteur à l'aide de CSS pur

Lorsque vous travaillez avec plusieurs colonnes de longueurs de contenu variables, obtenir des hauteurs égales sans recourir à des images d'arrière-plan peut être courant défi. Après des recherches approfondies, nous avons développé une solution CSS unique qui résout efficacement ce problème.

Solution

Pour une approche simplifiée qui distribue efficacement l'espace vertical, pensez à utiliser les propriétés suivantes :

.parent {
  display: table;
}

.child {
  display: table-cell;
}

Cette méthode attribue une structure de type tableau au conteneur parent et à ses enfants, garantissant qu'ils occupent la même hauteur verticale. space.

Compatibilité

Il est important de noter que cette solution n'est pas compatible avec Internet Explorer 7. Si la prise en charge d'IE7 est cruciale, une approche plus complexe peut être nécessaire.

Exemple

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

Dans cet exemple, les trois colonnes auront la même hauteur, quelle que soit la longueur du contenu de chacune colonne.

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!