Css "Вертикальная" Сетка

Question

Я хочу создать сетку с изменяемыми размерами, заполненную перетаскиваемыми и сортируемыми значками (как на рабочем столе).Проблема в том, что с помощью css «float: left» я получаю «горизонтальную» заливочную сетку (слева направо, затем сверху вниз), что я хочу, это сверху вниз, затем слева направо (также как рабочий стол)

Текущее состояние:

[ icon1 ][ icon2 ][ icon3 ]
[ icon4 ][ icon5 ][ empty ]
[ empty ][ empty ][ empty ]

Желаемое состояние:

[ icon1 ][ icon4 ][ empty ]
[ icon2 ][ icon5 ][ empty ]
[ icon3 ][ empty ][ empty ]

Есть ли какие-либо предложения по разметке HTML или правилам CSS?

правоТеперь у меня есть js-скрипт, который получает высоту контейнера div и, если он меньше, чем высота списка значков, он создает другой ul и заполняет его скрытым, но я не думаю, что это лучшийрешение.

Спасибо

Дополнительные замечания: я использую jQuery и jQuery UI, проект предназначен только для Google Chrome, поэтому меня не очень беспокоит совместимость браузера, также я неУ него проблемы с решениями HTML5 или CSS3, которые являются специфичными для браузера.Наконец, иконки загружаются динамически, и размер монетодержателя можно изменять, так что я не думаю, что иконки могли бы быть в абсолютном положении

* Извините за мой английский *

Answer 1

Использовать список из нескольких столбцов.Вот пример, который создает список из нескольких столбцов с помощью jquery.Если у вас есть это в нескольких столбцах, вы сможете делать то, что вам нужно с ним.Я бы предложил применить класс к каждому столбцу, чтобы вы могли изменить размер этого столбца, а не всего li, и установить li в качестве контейнера для области перетаскивания.

http://jsbin.com/ifaca/

Answer 2

Это может быть возможно при использовании column-width и column-gap в CSS3