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

我在容器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>

当我“浮动：左”时，divs将按预期方式换行，从而在较短的div和下一行div之间留下空白。

如何让div有效地“浮动起来”，包装真实而不是横向。只使用css

理想情况下，项目2将在项目1之下，但任何改进都将有所帮助。

所以最终看起来就像这样

解决方法

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

http://masonry.desandro.com/

或者尝试同位素，它具有更好的性能

http://isotope.metafizzy.co/