div 方格，float:left 问题（包括图片）

Question

我正在尝试制作一个网格，使其整体尺寸始终相同 (800x600)。

但是，我不希望网格中的所有正方形都具有相同的大小。

正如你所看到的，只要我增大一个正方形（2x2+间隙 - 图像中的彩色银色），所有其余较小的正方形都不会重新对齐，而是从下一行的开头开始 - 创建一个白色间隙在第二行。

有没有办法解决这个问题？

这是他们的 CSS：

.squareTEST1, .squareTEST2
{
    width: 60px;
    height: 60px;
    margin: 3px;
    float: left;
}

.squareTEST1A
{
    width: 126px;
    height: 126px;
    margin: 3px;
    float: left;

    background-color: Silver;
}

.squareTEST1
{
    background-color: Red;
}

.squareTEST2
{
    background-color: Blue;
}

非常感谢任何帮助 编辑在这里试试：http://jsfiddle.net/NF9N9/

注意：可能还有其他不同大小的正方形 3x3 和 4x4，但大多数是 1x1 的。只想制作一个没有缝隙的完美网格。它必须是动态的，这意味着任何正方形都可以在任何位置被炸毁，但最终它应该是一个紧凑的网格。

--

不相关 (LOW PRIO) - 但如果有人知道将 800x600 网格划分为 12 列 9 行（-1 或 2 行或列 - 我可以接受稍大的正方形）的更好方法，最终为 800x600 和有可被 5 整除的间隙和大小，我将不胜感激：P

Answer 1

遗憾的是，您不能仅使用 css 浮点数来执行此操作。我知道您最初是在寻找纯 CSS 的解决方案，但我认为唯一的方法是使用 jQuery Masonry 之类的东西：http://masonry.desandro.com/