Wie erreicht man mit Overflow: Hidden eine variable Breitenverteilung in verschachtelten Divs?

So erreichen Sie eine variable Breitenverteilung in verschachtelten Divs

In xHTML/CSS kommt es häufig zu einem Szenario, in dem mehrere verschachtelte Divs benötigt werden horizontal ausgerichtet werden, wobei die inneren Divs je nach Inhalt unterschiedliche Breiten haben. Diese Frage untersucht eine häufige Herausforderung: Wie kann der verbleibende verfügbare horizontale Raum einem der inneren Divs zugewiesen werden, wenn seine Breite nicht angegeben ist und von seinem Inhalt abhängt?

Um diesen Effekt zu erzielen, können wir die CSS-Eigenschaft verwenden „Überlauf: versteckt;“. Diese Eigenschaft verhindert, dass sich an schwebende Elemente angrenzende Elemente hinter das schwebende Element erstrecken, wodurch ein kontrolliertes Layout entsteht.

Beachten Sie die folgende HTML-Struktur:

<div>

Um das Layout zu konfigurieren, kann das folgende CSS verwendet werden angewendet:

#outer {
    overflow: hidden;
    width: 100%;
    border: solid 3px #666;
    background: #ddd;
}

#inner1 {
    float: left;
    border: solid 3px #c00;
    background: #fdd;
}

#inner2 {
    overflow: hidden;
    border: solid 3px #00c;
    background: #ddf;
}

Durch die Einstellung „Überlauf: versteckt;“ Beim „äußeren“ Div erzwingen wir, dass das schwebende „inner1“ Div im „äußeren“ Div enthalten bleibt. Das „inner2“-Div füllt dann den verbleibenden horizontalen Raum aus.

Um sicherzustellen, dass dieses Layout in älteren Versionen von Internet Explorer (IE 6 und 7) funktioniert, kann das folgende zusätzliche CSS mit bedingten HTML-Kommentaren verwendet werden:

<!--[if lte IE 6]>
<style type="text/css">
    #inner2 {
        zoom: 1;
    }

    #inner1 {
        margin-right: -3px;
    }
</style>
<![endif]-->

Dieser Stil stellt sicher, dass das „inner2“-Div den verbleibenden Platz in IE 6 korrekt ausfüllt und passt den Rand des „inner1“-Divs an, um eine durch die „zoom“-Eigenschaft entstandene Lücke auszugleichen.

Mit dieser Konfiguration passt das Div „inner1“ seine Breite basierend auf seinem Inhalt dynamisch an, und das Div „inner2“ nimmt die verbleibende verfügbare Breite ein, wodurch ein Layout erstellt wird, in dem die Divs horizontal an ihren jeweiligen Breiten ausgerichtet sind.

Das obige ist der detaillierte Inhalt vonWie erreicht man mit Overflow: Hidden eine variable Breitenverteilung in verschachtelten Divs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!