Frage zu p-Tag

[Gunnar Bittersmann]

@@MrMurphy

Die Frage ist wie sich der Text verhalten soll, wenn er in der Höhe mehr Platz beansprucht als das danebenstehende Bild.

Und auch, wie er sich verhalten soll, wenn er in der Höhe weniger Platz beansprucht als das Bild.

Das wird mitunter nicht bedacht; aufgemalt wird der happy path. Genau darum ging’s bei meiner diesjährigen Session auf dem UXcamp Europe.

Soll er er dann unter dem Bild weitergehen ist float sinnvoll. […] Wenn der Text in solchen Fällen hingegen immer seine Breite behalten soll (auch wenn er unter den Platz unter dem Bild nutzen könnte) ist CSS-Grid das Mittel der Wahl.

Oder auch beides: Auf schmalen Viewports Float, auf breiten Grid (o.a. Flexbox). ☞ Beispiel

Das Beispiel lässt sich auch leicht abwandeln, sodass die Bilder abwechselnd links und rechts vom Text stehen. ☞ Beispiel 2

---

Dann musst du aber auch clearen, wie es so schön heißt. Für das Clearen gibt es unterschiedliche Möglichkeiten.

Ja. Und alle, die nicht display: flow-root verwenden, sind hoffnungslos veraltet.

Die unterschiedlichen Möglichkeiten laufen umgangssprachlich unter der Bezeichnung clearfix.

Die Bezeichnung clearfix ist ein sicheres Indiz für hoffnungslos veraltet.

Welche sinnvoll ist hängt vom Quelltext ab.

Sinnvoll ist die mit display: flow-root.

🖖 Live long and prosper