盒子马赛克中的特殊'浮动'

Question

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

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

当所有的盒子只占用一排时，一切正常。但是，当我尝试将一个大于一行的框放置时，float:left会按照我想要的方式停止工作：

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

jsFiddle with the issue as displayed above.

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

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

感谢您的时间。

Answer 1

使用干净的CSS代码无法做到这一点。

但你可以使用javascript，有一些jQuery插件可以做到这一点，你可以尝试Isotope

Answer 2

Jquery Masonry会为您完成此操作。不幸的是，你不会用简单的标记和CSS来实现你的目标。