如何让不同高度的html div向上浮动
如何让不同高度的html div向上浮动
提问于 2011-09-19 09:08:36
我在容器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下，但任何改进都会有所帮助。
所以它最终会是这样的
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-09-19 09:24:15
尝试使用jQuery Masonry。这可能是一个很好的解决方案。
或者试试Isotope，它的性能要好得多
Stack Overflow用户
发布于 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/
Stack Overflow用户
发布于 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7465560
复制相关文章
相似问题
腾讯云开发者
