div сетка квадратов, float: левый выпуск (изображение в комплекте) - PullRequest
Новая
       21

div сетка квадратов, float: левый выпуск (изображение в комплекте)

2 голосов
/ 06 ноября 2011

Я пытаюсь сделать сетку таким образом, чтобы она всегда была одинакового размера (800x600).

Однако я не хочу, чтобы все квадраты в сетке были одинакового размера.

enter image description here

, как вы можете видеть, как только я сделаю один квадрат больше (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;
}

спасибо за любую помощь edit попробуйте здесь: http://jsfiddle.net/NF9N9/

примечание: могут быть другие квадраты разных размеров 3x3 и 4x4, но большинство будут 1x1.,просто хочу сделать идеальную сетку без пропусков.это должно быть динамическим, то есть любой квадрат может быть взорван в любой позиции, но в итоге он должен получить компактную сетку.

-

не связано (НИЗКИЙ ПРИО) - но если кто-нибудь знает лучший способ разделить сетку 800x600 на 12 столбцов на 9 строк (-1 или 2 строки или столбца - я могу жить с немного большими квадратами), который заканчивается 800x600 и имеет пробелы и размеры, делимые на 5, я 'буду благодарен: P

1 Ответ

3 голосов
/ 06 ноября 2011

К сожалению, вы не можете сделать это только с помощью CSS-поплавков.Я знаю, что вы изначально искали решение только для css, но я думаю, что единственный способ сделать это - использовать что-то вроде jQuery Masonry: http://masonry.desandro.com/

...