javascript - 方 block 马赛克中的特殊 'Float'

Question

我正在使用 mosaic (jsFiddle) 使用简单的 CSS 和 HTML 制作。

马赛克具有相同宽度和高度的行和列。它的每个单元格都应由整个框或其中的一部分填充。换句话说，每个盒子应该在长度方向占据一个或多个盒子，在宽度方向占据一个或多个盒子。

当所有的盒子只占一行时，一切正常。但是，当我尝试使一个框大于一行时，float:left 停止按我希望的方式工作:

http://img198.imageshack.us/img198/5207/boxshoudgohere.png

jsFiddle with the issue as displayed above.

如上图所示，(在 HTML 中)大框旁边的灰色框跳到下一行；我需要将框移动到红色箭头指向的位置。我的问题是:如何防止灰框移动？

考虑到我更喜欢干净的解决方案。换句话说，移动具有绝对或相对定位的框不是最佳选择，因为框及其宽度/高度是由 JavaScript 生成的(尽管您可以随意发布任何答案)。

感谢您的宝贵时间。

Answer 1

Jquery Masonry会为你做这件事。不幸的是，您无法通过简单的标记和 CSS 实现您想要的。