javascript - 有没有一种巧妙的方法来浮动项目以创建带有可扩展项目的网格，而不会使用 HTML/CSS/JS 浪费这么多空间？

Question

我使用 float 构建了一个非常基本的 div 网格：

但是，当扩展放置在右侧栏中的一项时，会发生以下情况（请原谅我用来说明我要实现的目标的粗略/蹩脚的箭头）：

这是我所期望的，但不是我真正想要的。我正在寻找一种巧妙的方法，让盒子 A 和 B 向上移动以填充空位，并将项目 CH 向上移动一排，以便最有效地利用可用空间。

这是我为说明这个问题而创建的 JSFiddle（抱歉，它不可点击，再次堆栈溢出代表......）：

http://jsfiddle.net/VDV6S/4/

我将不胜感激任何建议。

Answer 1

你需要jQuery Masonry或类似的东西。

或者，您可以手动将项目分成两列：http: //jsfiddle.net/thirtydot/VDV6S/5/

另一种选择是使用CSS3 columns，但是浏览器支持可能不可接受。