Wie kann ein inneres Div den verbleibenden horizontalen Raum ausfüllen, nachdem die Breite eines anderen inneren Div dynamisch festgelegt wurde?

Festlegen der Breite innerer Divs

Bei der Arbeit mit verschachtelten Divs und flexiblen Inhalten kann es schwierig sein, die geeignete Breite für jedes Div zu bestimmen. Diese Frage untersucht eine Technik, um die Breite eines inneren Divs auf den verbleibenden horizontalen Raum festzulegen, nachdem die Breite eines anderen inneren Divs berücksichtigt wurde.

HTML-Struktur:

Die Die HTML-Struktur besteht aus einem äußeren Div und zwei verschachtelten inneren Divs:

<div>

Problem Aussage:

Das Ziel besteht darin, dass das Div #inner2 den verbleibenden horizontalen Raum ausfüllt, nachdem die Breite des Div #inner1 dynamisch basierend auf seinem Inhalt bestimmt wurde.

Rätsel Zutat: Overflow: Hidden

Der Schlüssel zum Erreichen dieses Layouts ist die Verwendung der CSS-Eigenschaft overflow: versteckt; auf dem äußeren Div (#outer). Dies weist den Browser an, seine schwebenden untergeordneten Elemente innerhalb seiner eigenen Grenzen zu beschränken.

Überarbeitetes HTML:

Um das CSS effektiv anzuwenden, sollten die Div-IDs einer gültigen CSS-Syntax folgen:

<div>

CSS Lösung:

#outer {
  overflow: hidden;
  width: 100%;
  /* Styling for illustration purposes */
  border: solid 3px #666;
  background: #ddd;
}

#inner1 {
  float: left;
  /* Styling for illustration purposes */
  border: solid 3px #c00;
  background: #fdd;
}

#inner2 {
  overflow: hidden;
  /* Styling for illustration purposes */
  border: solid 3px #00c;
  background: #ddf;
}

Browserkompatibilität und Edge Cases:

Diese Lösung wurde getestet und bestätigt, dass sie in IE 6, 7 und 8 ordnungsgemäß funktioniert ; Firefox 3.5; und Chrome 4. In IE 6 eine zusätzliche CSS-Regel mit Zoom: 1; ist notwendig, um sicherzustellen, dass das Div #inner2 den verbleibenden Platz ausfüllt.

Das obige ist der detaillierte Inhalt vonWie kann ein inneres Div den verbleibenden horizontalen Raum ausfüllen, nachdem die Breite eines anderen inneren Div dynamisch festgelegt wurde?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!