Wie kann man dafür sorgen, dass ein inneres Div den verbleibenden Platz nach einem anderen Div füllt?

So stellen Sie die innere Div-Breite auf den verbleibenden Platz nach einem weiteren Div ein

In xHTML und CSS kann es vorkommen, dass Sie auf ein Szenario stoßen, in dem Sie dies tun müssen mehrere verschachtelte Divs innerhalb eines äußeren Divs mit einer definierten Breite von 100 % haben. Sie möchten, dass die inneren Divs in einer einzigen Zeile angezeigt werden, wobei die Breite des ersten Divs durch seinen Inhalt bestimmt wird.

Um dies zu erreichen, können Sie die folgende Technik verwenden:

Schritt 1: Inline-Anzeige für verschachtelte Divs verwenden

Setzen Sie die Eigenschaft „display“ der verschachtelten Divs auf „inline“, damit sie angezeigt werden erscheinen in derselben Zeile.

Schritt 2: Overflow für Outer Div auf Hidden setzen

Anwenden von „overflow: versteckt;“ zum äußeren Div, um sicherzustellen, dass seine untergeordneten Elemente (die verschachtelten Divs) innerhalb seiner Breite bleiben.

Schritt 3: Legen Sie die Breite für das erste verschachtelte Div auf „Auto“ fest

Lassen Sie die Breite des ersten verschachtelten Div (#inner1) nicht auf „auto“ festgelegt. Dadurch kann es basierend auf seinem Inhalt auf die erforderliche Breite erweitert werden.

Schritt 4: Überlauf für zweites verschachteltes Div auf „Ausgeblendet“ setzen

Überlauf „überlauf: versteckt“ anwenden; zum zweiten verschachtelten Div (#inner2), um zu verhindern, dass es sich über den verbleibenden Platz im äußeren Div hinaus erstreckt.

Beispielcode:

<div>

Zusätzliche Überlegungen:

Für die Kompatibilität mit IE 6 müssen Sie möglicherweise zusätzliches CSS mithilfe von bedingten HTML-Kommentaren hinzufügen, z wie in der bereitgestellten Antwort beschrieben.

Mit dieser Technik werden die inneren Divs inline angezeigt, wobei sich das zweite Div automatisch anpasst, um den verbleibenden Platz im äußeren Div einzunehmen.

Das obige ist der detaillierte Inhalt vonWie kann man dafür sorgen, dass ein inneres Div den verbleibenden Platz nach einem anderen Div füllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!