Warum werden meine 50 % breiten Inline-Block-Spalten in die nächste Zeile umgebrochen?

Umbruch von Inline-Blockelementen: Ein Problem mit der Breite

Beim Erstellen eines zweispaltigen Layouts mit 50 % Breite für jede Spalte entscheiden sich viele dafür für die Anzeige: Inline-Block-Ansatz, um potenzielle Herausforderungen mit Float zu vermeiden. Wenn jedoch für beide Spalten eine Breite von 100 % verwendet wird, ergibt sich ein rätselhaftes Szenario. Die zweite Spalte scheint bis zur zweiten Zeile durchzubrechen.

Die zugrunde liegende Ursache

Der Grund für dieses Verhalten liegt in der HTML-Berücksichtigung von Leerzeichen durch display:inline -Block. Wenn ein Leerzeichen die beiden div-Elemente trennt, interpretiert der Browser dieses Leerzeichen als zusätzliche Breite, wodurch die zweite Spalte umbrochen wird.

Die Lösung

Um dieses Problem zu beheben , beseitigen Sie die Leerzeichen zwischen den div-Elementen. Dadurch wird sichergestellt, dass die Berechnung ihrer Gesamtbreite korrekt ist, ohne dass zusätzlicher Platz hinzugefügt wird. Der angepasste HTML-Code würde wie folgt aussehen:

<div>

Mit dieser einfachen Änderung nehmen die beiden Spalten jetzt 100 % Breite ein und bleiben nebeneinander in derselben Zeile.

Das obige ist der detaillierte Inhalt vonWarum werden meine 50 % breiten Inline-Block-Spalten in die nächste Zeile umgebrochen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!