img in/mit/ohne p

[sailor_]

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>

[Can]

<img src="..." style="float:left">

[nicolas]

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

[Nokes]

Aber auch nur wenn beim <p></p> 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>

[Melegrian]

Aber auch nur wenn beim <p></p> 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.

[Mµ]

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

[Melegrian]

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>