Warum kollabiert mein äußeres Div, wenn ich die Größe des Browserfensters ändere?

Warum funktioniert das äußere

nicht? Umgeben Sie den inneren

vollständig. Bei der Größenänderung?

In einem Container mit einem inneren und äußeren

wird das äußere

wird unerwartet auf eine Breite reduziert, die kleiner ist als der Inhalt des inneren

. Dieses Problem kann auf die Art der Blockelemente zurückgeführt werden.

Blockelemente nehmen normalerweise so viel Breite ein wie ihr übergeordneter Container. Wenn die Größe des Fensters auf eine schmalere Breite geändert wird, wird das äußere

wird zunächst erweitert, um den Inhalt des inneren

aufzunehmen. Wenn sich die Fensterbreite jedoch weiter verringert, wird die Breite des äußeren

schließlich kleiner als die des inneren

.

Um dieses Problem zu beheben, wird eine Kombination aus inline-block und min -Breite: 100 % nutzbar. Inline-Block ermöglicht es einem Element, sich sowohl als Inline- als auch als Blockelement zu verhalten. Durch die Einstellung von min-width:100 % wird das äußere

stellt sicher, dass seine Breite immer mindestens der Breite seines Inhalts entspricht.

Aktualisierter Code

Durch Hinzufügen von display: inline-block und min-width: 100 % zum äußeres

, der Inhalt des inneren

verhindert erfolgreich, dass das äußere

beim Ändern der Fenstergröße nicht kleiner als die Breite des Inhalts verkleinert wird.

.demo {
  display: inline-block;
  min-width: 100%;
}

Das obige ist der detaillierte Inhalt vonWarum kollabiert mein äußeres Div, wenn ich die Größe des Browserfensters ändere?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!