Wie kann man in CSS dafür sorgen, dass nebeneinander liegende Divs die gleiche Breite haben?

Gleichbreite für nebeneinander liegende Divs in CSS

In HTML wird die Organisation von Elementen innerhalb eines übergeordneten Containers häufig mithilfe von div-Elementen erreicht . Allerdings kann es eine Herausforderung darstellen, mehrere untergeordnete Divs nebeneinander mit gleicher Breite auszurichten.

Beachten Sie die folgende HTML-Struktur:

<div>

In diesem Beispiel sind die untergeordneten Divs nebeneinander ausgerichtet , aber sie haben beliebige Breiten. Um gleiche Breiten zu erreichen, kann man CSS-Magie mithilfe der display:table-Eigenschaft einsetzen.

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

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

Diese CSS-Lösung verfügt über mehrere Schlüsselfunktionen:

• Sets das übergeordnete Div (#wrapper), das als Tabelle angezeigt werden soll (display: table) und legt table-layout: fest fest, um sicherzustellen, dass die Spalten gleich sind Breiten.
• Legt die untergeordneten Divs (#wrapper div) so fest, dass sie als Tabellenzellen (Anzeige: Tabellenzelle) mit gleichen Höhen angezeigt werden.

Vorteile:

• Funktioniert in modernen Browsern (IE7 nicht). unterstützt)
• Passt die Spaltenbreiten automatisch an den verfügbaren Platz an
• Ermöglicht flexible Layouts mit unterschiedlicher Anzahl untergeordneter Divs

Live-Beispiele:

• Zwei Divisionen: [JSFiddle](https://jsfiddle.net/g4dGz/1/)
• Drei Divs: [JSFiddle](https://jsfiddle.net/g4dGz/)

Das obige ist der detaillierte Inhalt vonWie kann man in CSS dafür sorgen, dass nebeneinander liegende Divs die gleiche Breite haben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!