Warum enthält mein Äußeres nicht mein Inneres, wenn die Größe geändert wird?-CSS-Tutorial-php.cn

Why Doesn't My Outer `` Contain My Inner `` When Resized?

Warum funktioniert das äußere

Hier das innere

nicht vollständig umgeben?

Problem:

Im bereitgestellten Codeausschnitt ist der Inhalt des inneren

verhindert nicht, dass das äußere

nicht schrumpft, wenn die Fenstergröße geändert wird. Infolgedessen wird das innere

läuft über das äußere

Diskussion:

Das Problem entsteht, weil das äußere

ist auf eine feste Breite eingestellt. Standardmäßig basiert die Breite von Blockelementen auf dem übergeordneten Element. Das innere

enthält Inhalte, die die Breite des äußeren

überschreiten und zum Überlaufen führen.

Lösung:

Damit das äußere

Um das innere

herumzuwickeln, kann man eine Kombination aus inline-block und min-width:100% verwenden. Durch Festlegen des äußeren

zum Inline-Block wird seine Breite inhaltsbasiert und nicht elternbasiert. Durch das Hinzufügen von min-width:100 % wird sichergestellt, dass das äußere

ist nie kleiner als die Breite seines Inhalts.

Aktualisierter Code:

.demo {
  ...
  display:inline-block;
  min-width:100%;
}

Nach dem Login kopieren

Diese Änderung ermöglicht es dem äußeren

um die Größe basierend auf dem Inhalt automatisch anzupassen und so zu verhindern, dass das innere

vom Verschütten nach draußen.

Das obige ist der detaillierte Inhalt vonWarum enthält mein Äußeres nicht mein Inneres, wenn die Größe geändert wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Vorheriger Artikel：Wie kann ich DOM-Elemente nach Klassennamen in PHP abrufen? Nächster Artikel：Können CSS3-Verläufe Transparenz integrieren?

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