Wie teilt man ein Div in zwei Teile auf, wobei ein Div den verbleibenden Platz einnimmt?

So erreichen Sie eine perfekte horizontale Aufteilung mit Divs in XHTML/CSS

Sie haben Divs in einem äußeren Div mit 100 % Breite verschachtelt, und Sie möchten die Breite der verschachtelten Divs in zwei Teile aufteilen, wobei ein Div den verbleibenden Platz nach dem anderen einnimmt. Der Haken ist, dass Sie die Breite des ersten Divs nicht angeben möchten, da seine Größe von seinem Inhalt abhängt.

Die Magie des versteckten Überlaufs

Die Die Lösung liegt in der Verwendung von overflow:hidden;. Diese CSS-Eigenschaft verhindert, dass Elemente, die an Float-Elemente angrenzen, über die Float-Grenzen hinausragen.

HTML-Struktur

Passen Sie Ihren HTML-Code wie folgt an und ersetzen Sie die #-Zeichen durch geeignete IDs:

<div>

CSS-Stile

Implementieren Sie das folgende CSS:

#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;
}

IE 6-Unterstützung

Optionales CSS für IE 6-Unterstützung (falls erforderlich):

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

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

Ergebnis

Mit diesen Änderungen nimmt #inner2 den verbleibenden horizontalen Raum ein und stellt so sicher, dass a Saubere und dynamische Aufteilung der verfügbaren Breite zwischen den verschachtelten Divs.

Das obige ist der detaillierte Inhalt vonWie teilt man ein Div in zwei Teile auf, wobei ein Div den verbleibenden Platz einnimmt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!