Css“vertical”Grid

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并将其填充为一个隐藏的但我不认为这是最好的解决方案。

感谢

aditional的注意：我使用jQuery和jQuery UI的proyect是谷歌浏览器只是所以我不会担心太多关于浏览器的兼容性，同时，我没有烦恼与HTML5或CSS3解决方案是浏览器特有的。最后，图标被加载dinamicaly和cointainer可以调整大小，所以我不认为该图标可能是绝对定位

*索里，我的英语*

Answer 1

这可以使用column-width和column-gap可能CSS3

Answer 2

使用多列列表。这是一个用jQuery创建多列列表的例子。一旦你有多个列，你应该能够做到你需要它。我建议在每个列上应用一个类，以便可以调整该列的大小而不是所有的列，并且可以将li设置为拖放部分的容器。

http://jsbin.com/ifaca/