div 方格，float:left 问题(包括图片) [英] 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+间隙 - 图像中的彩色银色)，所有其余较小的正方形都不会重新对齐，而是从下一行的开头开始 - 创建一个白色间隙在第二行.

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/

这篇关于div 方格，float:left 问题(包括图片)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！