为什么我的 div 重叠？答案

【问题标题】：Why are my divs overlapping?为什么我的 div 重叠？
【发布时间】：2013-04-15 14:35:01
【问题描述】：

我正在尝试在包含左右两个子 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

我错过了什么？

【问题讨论】：

标签： css html

【解决方案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。这使您的代码更易于维护。

【讨论】：

这不是世界上最糟糕的事情。这是一种很常见的做法，但我确实在某处读过如何在不添加额外 div 的情况下做到这一点，但我不记得了。我现在去查一下。
这是仍然像 2000 年而不是 2013 年那样编码的人的常见做法。codepen.io/cimmanon/pen/qDjdr
用clear:left|right添加伪元素或使用overflow或简单地调整图像。
我修复了使用 clearfix 的解决方案并删除了内联 css。而且您不必将我归结为 2000 年......我很确定 clearfix 至少在 2007 年之前并不常见。
Man CSS 太牛了。当我将其与原生 Android 和 iOS 开发进行比较时，CSS 速度慢得令人沮丧。

【解决方案2】：

您的缩略图将图片设置为 41 像素的特定高度。要么改变图片大小，要么改变div大小，要么设置外层div的溢出。

【讨论】：

您在哪里看到图像的额外填充？