我有X篇帖子,每篇帖子的宽度是固定的,高度未知,并希望它们在单个 div-wrapper 中分成两列。然而当我将所有帖子都左浮动时,就会出现这种情况。
如何消除空白间隔?
如何消除空白间隔?
在偶数块中添加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>
它应该能解决问题