如何让不同高度的html div浮起来

Question

我在容器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项下,但任何改进都会有所帮助.

所以它最终看起来像这样

Answer 1

尝试使用jQuery Masonry.这可能是一个很好的解决方案.

http://masonry.desandro.com/

或尝试Isotope,它具有更好的性能

http://isotope.metafizzy.co/