Question

我有一个段落，左边是图像，右边是描述。图像高于文本。这是一个例子：

enter image description here

现在，我如何确保下一段从图像下方开始？是否可以在下一段之前不加几个<br>？

我尝试将图片放在<p>标记<div>标记内。这应该非常简单，但我无法弄清楚。

Answer 1

试试这个：

<div id="upperdiv"><img src="yoursourcename"/><p>Eat fruits.....not kidding!</p></div>
<div id="lowerdiv">next paragraph.....</div>

自动下一个段落应该从较低的div开始。

Answer 2

选中demo。

您需要将<p>包裹在内<div>并定位p:first-child。

Answer 3

要获得您想要使用的结果，您需要在图像上使用float:left。这使得图像只是浮动在左侧，而所有文本都在它旁边流动。如果希望下一个元素不在图像周围流动，则需要清除浮动。清除浮动有很多方法，但最简单的只是clear:both。这里有very good article更详细地描述了这一点。

以下是HTML示例代码。您可以在http://jsbin.com/qilup/1/edit处使用它。

<html>
<body>
  <div>
    <img style="float:left" src="http://upload.wikimedia.org/wikipedia/commons/d/de/POL_apple.jpg" width=100px height=100px/> 
    Jar jar bins loves lits of apples! Jar jar bins loves lits of apples! Jar jar bins loves lits of apples! Jar jar bins loves lits of apples!
  </div>
  <div style="clear:both"/>
  <p>
    <strong>Next Paragraph is here</strong>  
  </p>
</body>
</html>

带有图像的段落后面的行

3 个答案: