我使用 float 构建了一个非常基本的 div 网格:
但是，当展开放置在右侧列中的其中一项时，会发生以下情况(请原谅我用来说明我要实现的目标的粗糙/蹩脚箭头):
这是我所期望的，但不是我真正想要的。我正在寻找一种巧妙的方法，让方框 A 和 B 向上移动以填充空位，并让元素 C-H 向上移动一排，以便最有效地利用可用空间。
这是我创建的 JSFiddle 来说明这个问题(抱歉它不可点击，再次出现堆栈溢出问题...):
如果有任何建议，我将不胜感激。
最佳答案
你需要jQuery Masonry ，或类似的东西。
或者，您可以手动将元素分成两列:http://jsfiddle.net/thirtydot/VDV6S/5/
另一种选择是使用 CSS3 columns , 然而 browser support可能 Not Acceptable 。
关于javascript - 有没有一种巧妙的方法可以使元素 float 以创建具有可扩展元素的网格，而不会使用 HTML/CSS/JS 浪费太多空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10056197/