Wie erreicht man in CSS gleiche automatische Breiten für nebeneinander liegende DIVs?

Gleiche automatische Breiten für nebeneinander liegende DIVs in CSS erreichen

Sie haben ein übergeordnetes HTML-DIV, das mehrere untergeordnete DIVs enthält, und Sie möchte, dass die untergeordneten DIVs automatisch die gleiche Breite annehmen. Nachfolgend finden Sie eine Lösung, die dies mithilfe der display:table-Eigenschaft erreicht:

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

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

Die display:table-Eigenschaft für das übergeordnete DIV richtet eine tabellenartige Struktur ein. Die Eigenschaft „table-layout: Fixed“ stellt sicher, dass die Spalten (d. h. untergeordnete DIVs) feste Breiten haben. Die display:table-cell-Eigenschaft für die untergeordneten DIVs platziert sie in den „Zellen“ der Tabelle.

Diese Lösung funktioniert effektiv in modernen Browsern außer IE7. Hier einige Beispiele:

• Drei DIVs: https://jsfiddle.net/g4dGz/
• Zwei DIVs: https://jsfiddle.net/g4dGz/1/

Das obige ist der detaillierte Inhalt vonWie erreicht man in CSS gleiche automatische Breiten für nebeneinander liegende DIVs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!