如何在div内的一行中用p,h3显示img？

Question

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

Answer 1

像这样？

现场演示

这有一个优势(取决于你想要的)到目前为止发布的其他答案 - 如果文本内容的高度大于图像,文本将保持齐平(不会环绕图像).

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>