div Problem warum wird Zeilenumbruch eingefügt?

Ich möchte ein Bild anzeigen, das 300px mal 300px ist und dann möchte ich etwas Text anzeigen. Leider beginnt der Text, den ich anzeigen möchte, in der nächsten Zeile nach dem Bild. Dies ist der blanke Code: -div Problem warum wird Zeilenumbruch eingefügt?

<html> 
    <body> 
     <div> 
      <div style="display:inline;"><img alt="a.jpg" src = "a.jpg"/></div> 
      <div style="display:inline;">some text which is too long probably a big paragraph</div> 

     </div> 
    </body> 
</html>

Wie kann alles in reibungslosen Ablauf anzeigen?

Vielen Dank im Voraus :)

Quelle

2010-11-27 TCM

<div> 
    <img> text 
</div>

einfach das Bild schweben.

div { overflow:auto; } 
img { float:left; }

Quelle

2010-11-27 13:35:21

natürlich auf die div in diesem Fall gelten würden Sie wahrscheinlich brauchen etwas margin-right und margin-bottom zum Bild hinzuzufügen, so dass die Text berührt das Bild nicht. – neurolabs

@neurolabs Ja, Sie können dem Bild auch einen Rahmen hinzufügen, so dass seine Abmessungen deutlich erkennbar sind, wenn es sich um ein Bild mit einem weißen Hintergrund handelt (und der umgebende Hintergrund ebenfalls weiß ist). –

denke ich, der Schwimmer Vorschlag richtig, aber das heißt

<div style="display:inline;overflow:auto;float:left;"> 
    <img alt="a.jpg" src = "VC.JPG"/> 
</div>

Quelle

2010-11-27 13:44:37

@El Ronnoco Du hast es falsch verstanden. Die Regel 'overflow: auto' muss auf das ** parent ** des floated-Elements angewendet werden. Außerdem ist es wirklich nicht notwendig, das Bild in ein Container-DIV zu verpacken. –

@ Šime Works für mich. Ich habe die "div" - und die anderen Stilregeln beibehalten, da ich wollte, dass mein Beispiel so gut wie möglich mit dem vorhandenen Code des OP übereinstimmt. –

@El Ronnoco Die 'display: inline' Regel wird überschrieben, da floated Elemente automatische Blöcke sind. Die Regel "overflow: auto" hat keinen Zweck, da das IMG-Element nicht floating ist. –

div Problem warum wird Zeilenumbruch eingefügt?

Antwort

Verwandte Themen