如何在div内的一行中显示im，p，h3？(how to display img with p, h3 in one line inside the div?)

如何在div内的一行中显示im，p，h3？(how to display img with p, h3 in one line inside the div?)

嘿，我需要在div的左侧显示图像，h3和p在img旁边的div的rifgt一侧。 谁能告诉我css和html的答案？ 谢谢

Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks

最满意答案

喜欢这个？

现场演示

与目前为止发布的其他答案相比，这具有优势（ 取决于您的需求 ） - 如果文本内容的高度大于图像，则文本将保持齐平（不会环绕图像）。

CSS：

#content { margin-left: 210px } #theDiv img { float: left }

HTML：

<div id="theDiv"> <img src="http://dummyimage.com/200x300/f0f/fff" /> <div id="content"> <h3>how to display img with p, h3 in one line inside the div?</h3> <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p> <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p> <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p> <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p> <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p> <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p> </div> </div>

Like this?

Live Demo

This has an advantage (depending on what you want) over the other answers posted so far - if the height of the text content is greater than the image, the text will stay flush (won't wrap around the image).

CSS:

#content { margin-left: 210px } #theDiv img { float: left }

HTML:

<div id="theDiv"> <img src="http://dummyimage.com/200x300/f0f/fff" /> <div id="content"> <h3>how to display img with p, h3 in one line inside the div?</h3> <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p> <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p> <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p> <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p> <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p> <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p> </div> </div>