Floating div two column layout blank space

问题:

I have X posts, each with fixed width and unknown height and want them to be in two columns in a single div-wrapper. However, when I put them all on float left, this happens.

How can I remove blank space?

回答1:

add clear: right to the even blocks and clear:left to the odd ones!

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

回答2:

Use :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>

回答3:

Try to add after the second block the following :

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

It should do the trick

回答4:

Make a left div container and a right div container and add your posts to these instead of simply using float: left...