Heim >Web-Frontend >CSS-Tutorial >Warum verhindert mein Inhalt nicht, dass ein übergeordnetes Div zusammenbricht?
Warum verhindert mein Inhalt nicht, dass ein übergeordnetes Div zusammenbricht?
- Linda HamiltonOriginal
- 2024-12-21 13:37:12349Durchsuche
Warum verhindert der Inhalt nicht, dass das übergeordnete Div verkleinert wird?
Im bereitgestellten HTML-Code ist das innere
fließt aus dem äußeren
wenn die Fenstergröße auf eine schmale Größe geändert wird. Dieses Verhalten tritt auf, obwohl das äußere
mit einer bestimmten Breite und dem inneren
enthält eine beträchtliche Menge an Inhalt.
Das zugrunde liegende Problem besteht darin, dass das äußere
ist standardmäßig als Element auf Blockebene festgelegt. Das bedeutet, dass es die gesamte verfügbare Breite seines übergeordneten Elements einnimmt. Auch wenn der Inhalt darin enthalten ist, bleibt das äußere
kann verkleinert werden, um sich der Fenstergröße anzupassen.
Kombination von Inline-Block und Min-Width
Um zu verhindern, dass das äußere
vor dem Schrumpfen können Sie folgende Eigenschaften kombinieren:
1. Inline-Block: Dadurch kann der äußere
sich wie ein Inline-Element zu verhalten und nur die Breite einzunehmen, die für seinen Inhalt erforderlich ist.
2. Min-width:100%: Dadurch wird sichergestellt, dass das äußere
hat eine Mindestbreite von 100 % seines übergeordneten Elements. Dadurch wird verhindert, dass es unter die Breite seines Inhalts schrumpft.
Aktualisierter Code
Hier ist der aktualisierte CSS-Code mit den empfohlenen Änderungen:
.demo {
display: inline-block;
min-width: 100%;
}
Mit diesen Änderungen , das äußere
bleibt nun mindestens so breit wie sein Inhalt, unabhängig von der Breite des Fensters.
Das obige ist der detaillierte Inhalt vonWarum verhindert mein Inhalt nicht, dass ein übergeordnetes Div zusammenbricht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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：Was ist der Unterschied zwischen SCSS und Sass?Nächster Artikel：Was ist der Unterschied zwischen SCSS und Sass?