Question

我正在尝试在列表元素中创建一个父div，其中包含左右两个子div。左边将包含一个图像，右边将包含两个额外的div，其中包含一些文本和时间戳。

我不能让左右div显示而不重叠。

我的HTML看起来像这样：

<ul class="activity-comments">
<li>
<div style="border: solid 1px #ff0000;">
  <div style="float:left;border: solid 1px #0000ff;">
      <img src="http://localhost/new/img/sampleimg.png" class="thumb-small">
  </div>
  <div>
    <small>Some sample text here 1</small>
  </div>
  <div>
    <small>Posted 1 day ago</small>
  </div>
</div>
</li>
<li>
<div style="border: solid 1px #ff0000;">
  <div style="float:left;border: solid 1px #0000ff;">
      <img src="http://localhost/new/img/sampleimg.png" class="thumb-small">
  </div>
  <div>
    <small>Some sample text here 2</small>
  </div>
  <div>
    <small>Posted 2 days ago</small>
  </div>
</div>
</li>
</ul>

看看这个jsfiddle

我错过了什么？

Answer 1

它们是重叠的，因为你是浮动一个div，但是没有清除浮动。

使用clearfix方法清除浮动。将类container添加到容器div并使用此CSS：

http://jsfiddle.net/57PQm/7/

.container {
    border: solid 1px #ff0000;
    zoom: 1; /* IE6&7 */
}

.container:before,
.container:after {
    content: "";
    display: table;
}

.container:after {
    clear: both;
}

您还会注意到我删除了您的内联CSS。这使您的代码更易于维护。

Answer 2

我想知道这是否是你要找的：jsfiddle

我在img{display:block;}中添加了图片，其中包含一些隐藏的填充内容，这些内容会使元素向下移动。

Answer 3

您的缩略图正在将图片设置为41px的特定高度。更改图片大小，或更改div大小或设置外部div的溢出。

为什么我的div重叠？

3 个答案: