suchen

Heim >Web-Frontend >CSS-Tutorial >Warum kollabiert mein äußeres Div, wenn ich die Größe des Browserfensters ändere?

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

Susan Sarandon
Susan SarandonOriginal
2024-12-15 01:20:17930Durchsuche

Why Does My Outer Div Collapse When Resizing the Browser Window?

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!

this display issue
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie kann ich Hover-Effekte auf Touch-Geräten simulieren?Nächster Artikel：Wie kann ich Hover-Effekte auf Touch-Geräten simulieren?

In Verbindung stehende Artikel

Mehr sehen