P标记内容在浮动图像下溢出

Question

我有一个列表，每个li都有一个图像和一些文本。

<div style="width:500px;">
<ul >
   <li>
       <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTyBPzjBIU0gCSFH7mLEVMuQ6d69KYfe14YCsJcLXCbHzhqJZ2p" width="100px" style ="float:left; ">

        <p>First line......<br/>Second: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
   </li>

</ul>
</div>

问题是:如果p内容超出了图像的高度，它就会流向图像下方的左侧。我怎么才能阻止它呢？我不想要任何下面的图像(在每个<li>)。

谢谢

Answer 1

您可以在p元素中添加左边距：

​li p {
    margin-left: 105px;  /* width of your images */
}​

Answer 2

在P标记上设置overflow: hidden;。这种方法的好处是您不需要知道图像标签的宽度。

li p {
  overflow: hidden;
}

参见。我在图片和段落文本之间添加了5个像素的空白，尽管这是可选的。

Answer 3

您可以将p标记向右浮动，并将其宽度设置为400px，而不是浮动图像