我有 X 个帖子,每个帖子都有固定的宽度和未知的高度,并希望它们位于单个 div 包装器中的两列中。但是,当我将它们全部放在左侧浮动时,就会发生这种情况。
如何删除空格?
添加 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>
利用: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>
尝试在第二个块之后添加以下内容:
<div style="clear:both"> </div>
它应该可以解决问题
制作一个left
div 容器和一个right
div 容器并将您的帖子添加到这些容器中,而不是简单地使用float: left
...