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标签向右浮动并使其宽度为400px

，而不是浮动图像

Answer 2

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

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

DEMO

Answer 3

只需在段落上留一个余量。与此p{margin-left:105px;}工作示例http://jsfiddle.net/xSbmn/

一样

保持img向左浮动，并在段落中添加等于或大于img的边距。

Answer 4

你可以向左浮动，宽度为100px的图像，向右浮动宽度为400px的parapgraph。

否则，创建一个css文件，插入样式，而不是在html上写它是非常有效的。

P标签内容在浮动图像下出血

4 个答案: