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
Freigeben: 2024-12-15 01:20:17
Original
847 Leute haben es durchsucht

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!

Quelle:php.cn
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage