Comment obtenir des largeurs automatiques égales pour les DIV côte à côte en CSS ?

Obtenir des largeurs automatiques égales pour les DIV côte à côte en CSS

Vous avez un DIV parent HTML contenant plusieurs DIV enfants, et vous souhaitez que les DIV enfants prennent automatiquement des largeurs égales. Vous trouverez ci-dessous une solution qui permet d'y parvenir en utilisant la propriété display: table :

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

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

La propriété display: table pour le DIV parent met en place une structure de type table. La propriété table-layout:fixed garantit que les colonnes (c'est-à-dire les DIV enfants) ont des largeurs fixes. La propriété display: table-cell pour les DIV enfants les place dans les "cellules" du tableau.

Cette solution fonctionne efficacement dans les navigateurs modernes, à l'exception d'IE7. Voici quelques exemples :

• Trois DIV : https://jsfiddle.net/g4dGz/
• Deux DIV : https://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!