4

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

在此处输入图像描述

如何删除空格?

4

4 回答 4

2

添加 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>
于 2012-10-04T14:37:16.960 回答
1

利用: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>
于 2012-10-04T14:48:53.337 回答
0

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

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

它应该可以解决问题

于 2012-10-04T14:37:15.397 回答
-1

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

于 2012-10-04T14:36:51.210 回答