div 方格，float:left 问题(包括图片)
我正在尝试制作一个网格，使其整体尺寸始终相同 (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+间隙 - 图像中的彩色银色)，所有其余较小的正方形都不会重新对齐，而是从下一行的开头开始 - 创建一个白色间隙在第二行.
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;
}
非常感谢任何帮助编辑在这里试试: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
推荐答案
遗憾的是，您不能仅使用 css 浮点数来做到这一点.我知道您最初是在寻找纯 CSS 的解决方案，但我认为去这里的唯一方法是使用 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/
相关文章