div square of square，float：left issue（包含图片）

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;
}

对于任何帮助，thnx很多 修改在此处尝试：http://jsfiddle.net/NF9N9/

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

-

无关（LOW PRIO） - 但是如果有人知道更好的方法来划分12列中的800x600网格9行（-1或2行或列 - 我可以使用稍大的方块），最终800x600和差距和大小可以被5整除，我将不胜感激：P

Answer 1

可悲的是，你只能用css浮点数来做这件事。我知道你最初正在寻找一个仅限css的解决方案，但我认为这里唯一的方法是使用像jQuery Masonry这样的东西：http://masonry.desandro.com/