img in/mit/ohne p

Beitrag von **sailor_** » 07.01.2012, 22:02

Ich möchte einen Text um ein Bild fließen lassen:

bbb tttttttttttttt
bbb tttttttttttttt
bbb tttttttttttttt
bbb tttttttttttttt
tttttttttttttttttttt

Wie mache ich das richtig?
1.

Code: Alles auswählen

<img src="images/bild.gif" />
<p>blabla</p>

2.

Code: Alles auswählen

<p><img src="images/bild.gif" /></p>
<p>blabla</p>

3.

Code: Alles auswählen

<p><img src="images/bild.gif" />blabla</p>

von **Anzeige von ABAKUS** »

Beitrag von **Can** » 07.01.2012, 22:13

Beitrag von **nicolas** » 08.01.2012, 11:17

Sollte mit allen deinen drei Code Varianten passen, wenn du Float:left; brauchst.

Beitrag von **Nokes** » 08.01.2012, 12:59

Aber auch nur wenn beim kein großer Abstand ist. Desswegen würde ich lieber dies her nehmen

Code: Alles auswählen

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

Beitrag von **Melegrian** » 08.01.2012, 13:24

Nokes hat geschrieben:Aber auch nur wenn beim kein großer Abstand ist.

Vielleicht noch ergänzend, bei p handelt es sich um ein Block-Element, bei img um ein Inline-Element. Wenn der Text von einem Block-Element wie p eingeschlossen wird, so wäre Schreibweise 3 plus float besser, damit das Inline-Element img mit von dem Blockelement p eingeschlossen wird.

Beitrag von Mµ » 08.01.2012, 13:31

Ich würde den Text auch nicht durch vom Bild abtrennen (sondern beides in [z.B.] setzten). So rankt das Bild besser in der Bildersuche. Der Abstand Bild-Text realisiert man durch margin-Angaben.

Beitrag von **Melegrian** » 08.01.2012, 13:50

Wenn das Bild aber noch einen Untertitel oder Urhebervermerk erhalten soll, so wäre diese oder eine ähnliche Schreibweise richtig:

Code: Alles auswählen

<p style="float&#58;left; margin&#58; 5px"><img src="images/bild.gif" style="margin-right&#58; 15px" /><br />Vermerk / Bildtitel</p>
<p>Text </p>