为什么我的div重叠？ [英] Why are my divs overlapping?

问题描述

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

I'm trying to create a parent div inside a list element that contains two children div for the left and right. The left will contain an image and the right will contain two additional divs that contain some text and a timestamp.

我无法获得左右div显示重叠。

I can't get the left and right divs to display without overlapping.

我的HTML看起来像这样：

My HTML Looks like this:

<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

我缺少什么？

推荐答案

它们是重叠的，因为你是浮动的div，但不会清除浮动。

They are overlapping because you are floating a div, but aren't clearing the float.

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

Use the clearfix method to clear the float. Add a class container to your container divs and use this 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。这使您的代码更易于维护。

You'll also notice that I've removed your inline CSS. This makes your code easier to maintain.

这篇关于为什么我的div重叠？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！