div正方形网格，float：左问题（包括图像） [英] div grid of squares, float:left issue (image included)

问题描述

我试图以这样的方式制作网格，它总是相同的大小（800x600）。

i am trying to make a grid in such a way that it is always the same size overall (800x600).

但是，我不想要所有的正方形

however, i do not want all squares in a grid to be of the same size.

，你可以看到，一旦我做一个正方形更大（2x2 +间隙 - 彩色银的图像）所有其余的小方块不重新对齐，从下一行的开始处开始 - 在第二行创建WHITE空格。

as you can see as soon as i make one square bigger (2x2+gap - colored silver in the image) all the rest of the smaller squares do not realign and start from the start of the next row - creating a WHITE gap in row two.

有办法解决这个问题吗？

is there a way to fix this?

这里是他们的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很多任何帮助
strong>尝试一下： http://jsfiddle.net/NF9N9/

thnx a lot for any assistance edit try it here: http://jsfiddle.net/NF9N9/

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

note: there may be other squares of different sizes 3x3 and 4x4, but the majority will be the 1x1 ones. just want to make a perfect grid with no gaps. it has to by dynamic, meaning any square can be blown up in any position, but in the end it should end up a compact grid.

-

无关（LOW PRIO） - 但是如果有人知道更好的方式划分800x600网格在12列9行（-1或2行或列 - 我可以稍微更大的正方形），结束800x600，并且间隙和大小可以除以5，我将感激：P

unrelated (LOW PRIO) - but if anyone knows a better way to divide 800x600 grid in 12 columns 9 rows (-1 or 2 rows or columns - i can live with slightly larger squares) that ends up 800x600 and has gaps and sizes divisible by 5, i'd be grateful :P

推荐答案

可悲的是你不能这样做只用css浮动。我知道你最初寻找一个css-only解决方案，但我认为唯一的方法去使用像jQuery Masonry： http://masonry.desandro.com/

Sadly you can't do this with css floats only. I know you were initially looking for a css-only solution, but I think the only way to go here is to use something like jQuery Masonry : http://masonry.desandro.com/

这篇关于div正方形网格，float：左问题（包括图像）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！