浮动div的双列布局留白问题

Question

我有X篇帖子，每篇帖子的宽度是固定的，高度未知，并希望它们在单个 div-wrapper 中分成两列。然而当我将所有帖子都左浮动时，就会出现这种情况。

如何消除空白间隔？

- user1590642

---

您需要更具体地说明您希望如何呈现帖子顺序。因此，您想要删除空格，这意味着您的div将会无序渲染。为了保持表单顺序，需要留出间隙。 - Ben Sewards

我曾经也遇到了同样的问题，通过Giorgio的答案解决了它。 - Al-Mothafar

Answer 1

在偶数块中添加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>

- giorgio

---

工作了，但不完全像我想的那样。至少离目标很近了，我发现它并没有百分之百解决问题。仍然存在问题，如果所有偶数都很长，所有奇数都很短，我会再次得到空格。 - Al-Mothafar

Answer 2

使用:nth-child(odd) {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>

- GajendraSinghParihar

---

我看到第二个div下面有一个间隙（检查了你的演示）。 - user1590642

+1，第二个div下面的这个间隙无法避免，我认为这是这个问题的最佳答案。 - Koerr

Answer 3

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

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

它应该能解决问题

- Laurent Brieu

---

由于帖子的高度是可变的，因此无法预测何时会发生这种情况。这只是一个例子，通常它可以在任何块之后发生。 - user1590642

Answer 4

创建一个名为“left”的div容器和一个名为“right”的div容器，并将您的文章添加到这些容器中，而不是仅使用“float: left”...

- Sidharth Mudgal

---

我同意这个观点，因为在帖子上使用可变高度只会通过float: left创建混乱。你需要一个结构来解决这个问题。 - Ben Sewards

由于我不知道块的高度（假设它是随机的），因此一列可能比另一列长得多。 - user1590642

同样的问题会发生，这不是答案！你可以将其作为评论写下来。 - Al-Mothafar