Comment créer des divisions côte à côte avec des largeurs automatiques égales en utilisant CSS ?

Divs CSS côte à côte avec des largeurs automatiques égales

Obtenir des largeurs automatiques égales pour les DIV enfants au sein d'un DIV parent peut être délicat avec approches traditionnelles de flottement et de largeur. Cependant, l'utilisation de la propriété display: table fournit une solution moderne qui active cette fonctionnalité.

Solution utilisant Display: Table

1. Définissez le DIV parent (#wrapper ) pour afficher sous forme de tableau et activer une disposition de tableau fixe. Cela garantira que les DIV enfants occupent des largeurs égales.
2. Définissez la hauteur du DIV parent pour spécifier l'espace vertical disponible.
3. Pour chaque DIV enfant, définissez la propriété d'affichage sur table-cell pour assurez-vous qu'ils apparaissent côte à côte et ont la même hauteur que le DIV parent.

CSS Exemple :

#wrapper {
  display: table;
  table-layout: fixed;
  width: 90%;
  height: 100px;
  background-color: Gray;
}

#wrapper div {
  display: table-cell;
  height: 100px;
}

Exemple HTML :

<div>
<p><strong>Remarque :</strong></p>
<ul>
<li>Ceci La solution n'est pas compatible avec IE7 et versions antérieures.</li>
<li>Les exemples JSFiddle fournis démontrent à la fois trois et deux DIV enfants de largeur égale.</li>
</ul>
</div>

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!