Css 浮动div两列布局空格

我有X个帖子，每个帖子都有固定的宽度和未知的高度，我希望它们在一个div包装器中有两列。然而，当我把它们都放在左侧浮动时，就会发生这种情况

---

如何删除空白？

制作一个

左

div容器和一个

右

div容器，将您的帖子添加到这些容器中，而不是简单地使用

浮动：左

。

尝试在第二个块后添加以下内容：

<div style="clear:both">&nbsp;</div>

---

它应该做到这一点

将clear:right添加到偶数块，clear:left添加到奇数块

<style type="text/css">
    .odd { float: left; clear: left; }
    .even { float: right; clear: right; }
</style>

<div class="odd">content</div>
<div class="even">content</div>
<div class="odd">content</div>
<div class="even">content</div>
<div class="odd">content</div>

.odd{浮点：左；清除：左；}
.偶数{float:right；clear:right；}
内容
内容
内容
内容
内容

使用

：第n个子项（奇数）{clear:both；}

CSS

.outer {border:solid #f00; padding:10px;overflow:auto}
.outer div{border:solid 1px #f00; float:left; margin:5px}
.outer div:nth-child(odd) {clear:both;}

HTML

<div class="outer">
  <div >
    content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br></div>
<div >
     content content content content <br>content content content content <br>content content content  content <br>
</div>
<div >
     content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br>
</div>
<div>
     content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br>
</div>
<div >
     content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br>
</div>
  </div>

内容
内容
内容
内容
内容
内容
内容
内容
内容

内容
内容
内容

内容
内容
内容
内容
内容
内容
内容
内容
内容

内容
内容
内容
内容
内容
内容
内容
内容
内容

内容
内容
内容
内容
内容
内容
内容
内容
内容

我同意，因为在立柱上设置可变高度只会让just float:left变得一团糟。你将需要一个结构。因为我不知道块的高度（假设它是随机的），一列可能比另一列长得多。同样的问题也会发生，这不是答案！你可以把它作为一条评论。因为帖子的高度是可变的，所以发生这种情况时是不可预测的。这只是一个例子，通常情况下，它可以发生在任何块。我看到一个差距低于第二分区（检查您的演示）+1，这个差距低于第二分区是无法避免的，我认为这是最好的回答这个问题，你需要更具体一点，你想如何呈现文章的顺序。因此，您希望删除空白，这意味着您的div将按顺序渲染。需要有一个缺口来保持秩序。我也有同样的问题，由乔治回答。工作了，但不是真的像我想要的，嗯，很接近，我只是发现它不是100%解决问题。还有一个问题，若所有的偶数都是长的，所有的奇数都是短的，那个么我又得到了一个空白。