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
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!
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