0

我有一个列表，每个 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>）。

谢谢

4

5 回答 5

2

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

li p {
  overflow: hidden;
}

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

于 2013-01-03T22:09:11.913 回答
0

您可以将 p 标签向右浮动并赋予其 400px 的宽度，而不是浮动图像

于 2013-01-03T21:30:23.707 回答
0

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

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

演示

于 2013-01-03T21:33:25.360 回答
0

只需在段落上加一个边距。像这个p{margin-left:105px;}工作示例http://jsfiddle.net/xSbmn/

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

于 2013-01-03T21:36:09.517 回答
0

您可以向左浮动宽度为 100px 的图像，向右浮动宽度为 400px 的段落。

否则，创建 css 文件、插入样式而不是将其写入 html 会非常有效。

于 2013-01-03T21:36:16.247 回答