Bild im Text unten ausrichten

blondes-gift · **blondes-gift** » 29.12.2016, 12:54 **Bild im Text unten ausrichten**

Ein Bild links bzw. rechts auszurichten und den Text herumlaufen zu lassen ist mit float ja recht simpel. Am Anfang des Textes steht das Bild und der Text verteilt sich daneben und darunter. Beim responsiven Design passt sich der Text dem Bild an.

ttttttbb
ttttttbb
tttttttttt
tttttttttt

Code: Alles auswählen

<p>
<img src="bild.png" style="float&#58; right;"/>
text text text
</p>

Wie bekomme ich nun das Bild ans Ende des Textes, so dass der Text sich beim reposiven Design um das Bild verteilt?

tttttttttt
tttttttttt
ttttttbb
ttttttbb

Can · **Can** » 29.12.2016, 13:00 **Bild im Text unten ausrichten**

Gar nicht sauber bzw. praktikabel ohne JavaScript. Man könnte das Bild absolut im relativen Text platzieren aber dann müsstest du für die Viewports auch wieder die Bilgröße angeben usw. -> nervig.

Mach einfach zwei Absätze daraus.

nerd · **nerd** » 29.12.2016, 17:28 **Bild im Text unten ausrichten**

Gar nicht - Der text ist "inline" wenn er um irgendwas rum fliessen soll, und dein bild ist "block". Du kannst blockelemente nicht "unten rechts" an inline-elementen ausrichten.

Abgesehen davon ist das auch weder benutzerfreundlich noch responsive, denn du muesstest text und bild in gleichen verhaeltnis (und stufenlos!) runterskalieren, was dazu fuehrt dass der text auf handies schnell unlesbar wird, und man auf dem bild auch irgendwann nichts mehr erkennen kann.

Die einzige richtige loesung waere text oben, und bild darunter auf mobiles, beide bloecke jeweils 100% breite.