垂直對齊div，同時保持它們以「列表樣式」排列

Question

我已經到了一個地步，我真的無法再爲這個問題想到任何解決方案。我想要實現的是： 我在一些div中填充內容，例如0-10的值。然後，在顯示它們時，它們應以響應用戶窗口大小的方式列出。 上了一個大屏幕就應該是這樣的：

1 | 4 | 7 | 10 
2 | 5 | 8 
3 | 6 | 9 

而且在一個較小的屏幕：

1 | 5 | 9 
2 | 6 | 10 
3 | 7 
4 | 8 

我想它給予的div的float: left;屬性，這給了我這樣的輸出：

1 | 2 | 3 | 4 
5 | 6 | 7 | 8 
9 | 10 

問題是：順序是不一樣的在預期的輸出，和：所述「行」被首先填充，而不是COLS。 有沒有人知道一個解決方案如何才能實現這樣的事情只有CSS和HTML？

Answer 1

現代解決方案是CSS多列模塊。你可以使用這樣的：

.content { 
    -webkit-column-width: 80px; 
    -webkit-column-gap: 5px; 
} 

http://jsfiddle.net/EN92F/

檢查support，IE10 +。

如果瀏覽器不支持它（例如IE8），它將優雅地降級到單列布局，就像這裏的http://jsfiddle.net/EN92F/1/一樣，這並不壞。

更多讀物Using CSS multi-column layouts。