Comment créer des divisions côte à côte avec des largeurs égales à l'aide de CSS ?

Divisions côte à côte avec largeurs égales automatiques à l'aide de CSS

Pour créer des divs enfants qui prennent automatiquement des largeurs égales au sein d'un div parent, exploitez la puissance de la propriété display: table de CSS. Cette approche, bien qu'elle ne soit pas prise en charge par IE7, permet d'obtenir efficacement le résultat souhaité dans les navigateurs modernes.

Solution :

1. Définissez le div parent pour afficher : table et disposition de la table : corrigée. Cela établit une structure de type tableau.
2. Définissez les divs enfants pour qu'ils s'affichent : table-cell. Cela les traite comme des cellules de tableau, ce qui donne des largeurs égales.
3. Ajustez les propriétés de largeur et de hauteur du div parent comme vous le souhaitez.

Exemple Code :

CSS :

#wrapper {
    display: table;
    table-layout: fixed;

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

HTML :

<div>

Démo :

Visitez les liens JSFiddle suivants pour voir la solution dans action :

• Trois divs : http://jsfiddle.net/g4dGz/
• Deux divs : http://jsfiddle.net/g4dGz/1/

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!