css - フローティング div 2 列レイアウトの空白スペース

Question

それぞれ幅が固定で高さが不明な X ポストがあり、1 つの div-wrapper で 2 つの列に配置したいと考えています。しかし、それらをすべてフロート左に置くと、これが起こります。

空白を削除するにはどうすればよいですか?

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

2 番目のブロックの後に次を追加してみてください。

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

それはトリックを行う必要があります

Answer 4

divleftコンテナーとrightdiv コンテナーを作成し、単に使用する代わりにこれらに投稿を追加しますfloat: left...