Ich versuche, einen Kommentarabschnitt für meine Website zu erstellen. Im Kommentarbereich möchte ich es im WordPress-Stil mit dem Avatar nach links legen. Es funktioniert, aber was passiert, ist der Kommentartext, der sich um den darunterliegenden Avatar legt. Zum Beispiel hier . Dies hat wahrscheinlich eine einfache Lösung, aber ich bin ein CSS-Amateur. Dies ist das relevante XHTML und CSS:
%Vor%Von der Spezifikation :
Da sich ein Fließkomma nicht im Fluss befindet, fließen nicht positionierte Blockfelder, die vor und nach der Fließkomma-Box erstellt wurden, vertikal, als ob der Gleitkomma nicht vorhanden wäre.
Das bedeutet, dass Elemente mit display: block , die nicht positioniert sind, den Float ignorieren.
Die neben dem Float erstellten Linienfelder werden jedoch gekürzt, um Platz für die Randbox des Floats zu schaffen.
Das bedeutet, dass Inline-Elemente um Floats fließen. Deshalb fließt Ihr <span> und der Text innerhalb von <p> um div.left , obwohl die <p> und div.right nicht.
Das Rahmenfeld einer Tabelle, ein ersetztes Element auf Blockebene oder ein Element im normalen Ablauf, das einen neuen Blockformatierungskontext festlegt (z. B. ein Element mit "Überlauf" anders als "sichtbar") darf sich nicht überlappen schwebt im selben Blockformatierungskontext wie das Element selbst. Falls erforderlich, sollten Implementierungen das besagte Element löschen, indem es unterhalb irgendeines der vorhergehenden Floats platziert wird, aber es kann benachbart zu solchen Floats platziert werden, wenn ausreichend Platz vorhanden ist.
Und das - so stumpf es auch ist - ist die Antwort auf Ihr Problem. Sie müssen einen "neuen Block-Formatierungskontext einfügen".
Floats, absolut positionierte Elemente, Inline-Blöcke, Tabellenzellen, Tabellenbeschriftungen und Elemente mit 'overflow' außer 'visible' (außer wenn dieser Wert in das Viewport übernommen wurde) stellen neue Blockformatierungskontexte her.
Das einfachste für Sie ist 1 :
%Vor%Beachten Sie, dass Sie wahrscheinlich auch 1 möchten:
%Vor% Um ein verwandtes, aber anderes Problem zu beheben. Wenn Ihr <p> Inhalt kürzer als Ihr Bild ist, wird die floated div.left die Höhe von div.comment nicht erweitern. Wenn Sie overflow: auto; hinzufügen, gelangen Sie in den passenden komplizierten Fällen Teil der Spezifikation :
Wenn die Elemente auf Blockebene, nicht ersetzte Elemente im normalen Fluss, wenn 'Überlauf' nicht zu 'sichtbar' berechnet wird, ein Element mit schwebenden Nachkommen hat, dessen unterer Rand sich unterhalb des unteren Rands befindet, wird die Höhe erhöht diese Kanten
Was im Grunde sagt, dass floats nur overflow <> visible expandierende Elemente erweitern.
1 overflow: hidden; würde ebenfalls funktionieren, aber würde den Inhalt zuschneiden, anstatt Scrollbalken zu werfen benötigt.
