CSS左浮动坐在彼此的顶部答案

【问题标题】：CSS left floats sitting on top of each otherCSS左浮动坐在彼此的顶部
【发布时间】：2010-08-27 20:05:20
【问题描述】：

所以，我正在尝试创建一个 div 类，它将显示在一行中，然后在所有空间都被占用时自动换行到下一行。

.contributor_thumbnail {

    display: block;
    float: left;
    width: 150px;
    height: 150px;
    border: 1px solid #777;

}

所以当我这样调用代码时：

   <div class="contributor_thumbnail">thumb here</div>
   <div class="contributor_thumbnail">thumb here</div>
   <div class="contributor_thumbnail">thumb here</div>
   <div class="contributor_thumbnail">thumb here</div>

div 将并排放置。

现在 div 只是重叠。有什么想法吗？

【问题讨论】：

这刚刚开始工作......也许我只是在上传之前没有保存更改
对我来说似乎很好：jsfiddle.net/ydBrY 您可能遗漏了一些造成问题的东西。将正确的示例作为 URL 发布或像我一样使用 jsfiddle。
您不需要为 div 指定 display: block;，因为它们本质上是 div 级别的元素。

标签： css html overlap

【解决方案1】：

编辑：完全误读了您的问题...以为您说您不希望它连续出现。哦，好吧，我会把这个留在这里，以防有人不知道。

您正在寻找 CSS clear 属性。只需将 clear: both; 添加到您的 CSS。

http://www.w3.org/TR/CSS2/visuren.html#flow-control

小提琴 http://jsfiddle.net/zRKYM/

【讨论】：