如何获取不同高度的html div来浮动 [英] How to get different height html divs to float up

问题描述

我在容器div中有一系列动态创建的不同高度的div。

I've got a series of dynamically created divs of varying heights in a container 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>

当我float：left时，divs按预期包装，在较短的div和下一行div之间留出空格。

When I "float: left" the divs wrap as expected leaving white space between the shorter divs and the next row of divs.

我如何得到div有效地float：up，包括veritcally而不是水平。只使用css。

How would I get the divs to effectively "float: up", wrapping veritcally rather than horizonatally. Using only css.

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

Ideally, item 2 would be under item 1 but any improvement would help.

它会以这样的形式出现。

So it would end up looking like this

推荐答案

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

Try using jQuery Masonry. It could be a great fix for this.

http://masonry.desandro.com /

或尝试Isotope，其效果更好。

Or try Isotope, which has much better performance

http://isotope.metafizzy.co/

这篇关于如何获取不同高度的html div来浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！