css - 浮动div两列布局空格

Question

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

如何删除空格？

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>

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>

Answer 3

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

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

它应该可以解决问题

Answer 4

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