浮动div两列布局空格答案

【问题标题】：Floating div two column layout blank space浮动div两列布局空格
【发布时间】：2015-06-05 09:11:48
【问题描述】：

我有 X 个帖子，每个帖子都有固定的宽度和未知的高度，并希望它们位于单个 div 包装器中的两列中。但是，当我将它们全部放在左侧浮动时，就会发生这种情况。

如何删除空格？

【问题讨论】：

您需要更具体地说明您希望如何按顺序呈现帖子。所以你想删除空格，这意味着你的 div 会乱序渲染。需要有一个间隙来保持表单的顺序。
我也遇到了同样的问题，giorgio 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>

【讨论】：

工作，但不是很喜欢我想要的，嗯，至少很接近，我只是发现它不是 100% 解决问题。仍然有问题，如果所有偶数都长而所有奇数都短，我又得到了空白。

【解决方案2】：

使用:nth-child(odd) {clear:both;}

Working DEMO

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>

【讨论】：

我看到第二个 div 下方有一个间隙（检查了你的演示）
+1，这个低于2nd div的差距是无法避免的，我认为这是问题的最佳答案

【解决方案3】：

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

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

它应该可以解决问题

【讨论】：

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

【解决方案4】：

制作一个left div 容器和一个right div 容器并将您的帖子添加到这些容器中，而不是简单地使用float: left...

【讨论】：

我同意，因为在帖子上设置可变高度只会造成混乱，只是浮动：左。您将需要一个结构。
因为我不知道块的高度（假设它是随机的），所以一列可能比另一列长得多。
同样的问题会发生，这不是答案！您可以将其作为评论进行修改。