Gunnar Bittersmann: Bild anordnen

Beitrag lesen

@@Achot

Was heißt „links davon“? Sollen sie das Bild umfließen? Oder soll unter dem Bild frei bleiben?

Unter dem Bild soll frei bleiben.

OK, also nicht einfach float.

Es wäre ein leichtes, wenn die Absätze, die neben dem Bild stehen sollen, in einem Containerelement (div) gewrappt wären. Müssen sie aber nicht sein, es geht auch ohne – bei feststehender Bildbreite:

Das Bild[1] [2] steht im Markup direkt nach dem (letzten) Absatz, der über die volle Breite gehen soll. Die auf das Bild folgenden Absätze (figure ~ p) bekommen rechten Abstand (Bildbreite + etwas Zwischenraum) verpasst. Das Bild wird absolut positioniert und rechts ausgerichtet. Das Ganze aber nur per media query für breiten Viewport.

Bei schmalem Viewport wird das Bild per Flexbox/order hinter dem gewünschten Absatz plaziert.

Codepen [3]

LLAP 🖖

--
„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe

  1. Ob figure hier angebracht ist, lässt sich ohne den Inhalt zu kennen nicht sagen. Vielleicht ist es auch nur ein blankes img-Element; Styles dann für dieses angeben. ↩︎

  2. Zu width: min-content siehe diesen Thread. ↩︎

  3. BTW, zum lobotomized owl selector siehe Heydons ALA-Artikel ↩︎