浮动div两列布局空格

Question

我有X个帖子，每个帖子都有固定的宽度和未知的高度，并希望它们在一个div-wrapper中分成两列。但是，当我把它们全部放在左侧时，会发生这种情况。

如何删除空格？

Answer 1

添加清晰：右边的偶数块和清除：留给奇数的！

<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;}

<强> 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>

Answer 3

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

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

它应该做的伎俩

Answer 4

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