Wie erstelle ich mit CSS nebeneinander liegende Divs mit gleicher Breite?

Nebeneinander angeordnete Divs mit automatisch gleichen Breiten mithilfe von CSS

Um untergeordnete Divs zu erstellen, die innerhalb eines übergeordneten Divs automatisch gleiche Breiten annehmen, Nutzen Sie die Leistungsfähigkeit der CSS-Eigenschaft display:table. Dieser Ansatz wird zwar von IE7 nicht unterstützt, erzielt aber in modernen Browsern effektiv das gewünschte Ergebnis.

Lösung:

1. Stellen Sie das übergeordnete Div so ein, dass es Folgendes anzeigt: Tabelle und Tabellenlayout: behoben. Dadurch entsteht eine tabellenartige Struktur.
2. Stellen Sie die untergeordneten Divs so ein, dass sie angezeigt werden: Tabellenzelle. Dadurch werden sie als Tabellenzellen behandelt, was zu gleichen Breiten führt.
3. Passen Sie die Breiten- und Höheneigenschaften des übergeordneten Divs wie gewünscht an.

Beispiel Code:

CSS:

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

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

HTML:

<div>

Demo:

Besuchen Sie die folgenden JSFiddle-Links, um die Lösung zu sehen Aktion:

• Drei Divs: http://jsfiddle.net/g4dGz/
• Zwei Divs: http://jsfiddle.net/g4dGz/1/

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS nebeneinander liegende Divs mit gleicher Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!