我使用左浮动DIV来模拟一个两列布局(每个div包含文本字段来编辑不同的数据,如名称,爱好,…).所以应该看起来像这样
1 2 3 4 5 6
现在我的div-Box并不总是相同的,因为DIV的元素比其他元素要多.现在我的布局看起来像这样
1 2
2
3 4
5 6
如果您缩放比例,您也可以看到this example的效果,以便仅显示四个或三个列.例如.如果4列显示在一行中,则Float 1和Float 6之间有很大的空间.在我的UI上看起来并不好看.我想要的是浮动6跟随浮动1之间没有空格(除了我定义的边距)
编辑：我的DIV基本上只包含一个float：left和width：40％,所以两个适合屏幕
这是一个屏幕截图显示更多
解决方法
jQuery Masonry plugin将做你想要的.
如果你想坚持纯CSS,你可以做一些像下面这样的事情,但我不认为这是你要做的：
<div class="col"> <div class="one"></div> <div class="three"></div> <div class="five"></div> <div class="seven"></div> </div> <div class="col"> <div class="two"></div> <div class="four"></div> <div class="six"></div> <div class="eight">who do we appreciate</div> </div>
和CSS：
.col {
float: left;
width: 200px;
}
