我在容器div中有一系列动态创建的不同高度的div。
<div id="container">
<div id='d1'>Varying text...</div>
<div id='d2'>Varying text...</div>
<div id='d3'>Varying text...</div>
<div id='d4'>Varying text...</div>
<div id='d5'>Varying text...</div>
<div id='d6'>Varying text...</div>
<div id='d7'>Varying text...</div>
</div>
当我“浮动:左”时,div会像预期的那样换行,在较短的div和下一行div之间留出空白。
我如何让div有效地“浮动:向上”,垂直包装而不是水平包装。仅使用css。
理想情况下,项目2应该在项目1下,但任何改进都会有所帮助。
所以它最终会是这样的
发布于 2011-09-19 09:24:15
尝试使用jQuery Masonry。这可能是一个很好的解决方案。
或者试试Isotope,它的性能要好得多
发布于 2011-09-19 09:23:29
您应该尝试将div的每一列放入它自己的容器中,并将它们向左浮动。例如:
<div id='container'>
<div id='col1'>
<div id='d1'>asdf</div>
<div id='d2'>asdf</div>
</div>
<div id='col2'>
<div id='d3'>asdf</div>
<div id='d4'>asdf</div>
</div>
</div>
等等。
每列靠左浮动,列中的每一项都很好地垂直流动……下面是一个例子:http://jsfiddle.net/V6z8F/
发布于 2016-05-31 19:49:40
最近我为我的项目做了这件事。
为父类添加CSS:
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
示例:
<div class="parent">
<div class="child"></div>
</div>
https://stackoverflow.com/questions/7465560
复制相似问题