Comment faire en sorte que les divisions côte à côte aient des largeurs égales en CSS ?

Largeurs égales pour les divisions côte à côte en CSS

En HTML, l'organisation des éléments dans un conteneur parent est souvent réalisée à l'aide d'éléments div . Cependant, aligner plusieurs divs enfants côte à côte avec des largeurs égales peut poser un défi.

Considérez la structure HTML suivante :

<div>

Dans cet exemple, les divs enfants sont alignés côte à côte. , mais ils ont des largeurs arbitraires. Pour obtenir des largeurs égales, on peut utiliser la magie CSS 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;
}

Cette solution CSS a plusieurs fonctionnalités clés :

• Ensembles le div parent (#wrapper) à afficher sous forme de tableau (affichage : table) et définit la disposition de la table : fixe pour garantir l'égalité des colonnes widths.
• Définit les divs enfants (#wrapper div) à afficher sous forme de cellules de tableau (affichage : table-cell) avec des hauteurs égales.

Avantages :

• Fonctionne dans les navigateurs modernes (IE7 n'est pas pris en charge)
• Ajuste automatiquement la largeur des colonnes en fonction de l'espace disponible
• Permet des mises en page flexibles avec un nombre variable de divs enfants

Exemples en direct :

• Deux divisions : [JSFiddle](https://jsfiddle.net/g4dGz/1/)
• Trois divisions : [JSFiddle](https://jsfiddle.net/g4dGz/)

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!