Warum kollabiert mein äußeres Div, wenn ich die Größe des Browserfensters ändere?-CSS-Tutorial-php.cn

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

Nach dem Login kopieren

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!

Vorheriger Artikel：Wie kann ich Hover-Effekte auf Touch-Geräten simulieren? Nächster Artikel：Warum funktioniert mein Sticky Element nicht in einem Flexbox-Container?

Erklärung dieser Website

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

Aktuelle Ausgaben