如何先垂直然後水平地製作div堆棧？

可能重複：
How to stack divs from top to bottom in CSS 如何先垂直然後水平地製作div堆棧？

當我有多個相鄰的div float:left，他們堆棧是這樣的：

_______ 
| 1 2 3 | 
| 4 5 | 
|_______|

我想要一個堆棧是這樣的：

_______ 
| 1 4 | 
| 2 5 | 
|_3_____|

jsFiddle with the horizontal stacking

我該如何實現垂直疊加？

來源

2011-09-06 Benjamin Crouzier

這是一個很好的問題，但爲什麼排在首位？你想填補用戶已經顯示的空間，然後繼續滾動以查看更多... 它似乎你正在一些移動網站上工作 –

確實投票結束 –

@ pinouchon;對於這種類型的佈局，您可以使用css3 column-count property。

CSS：

div#multicolumn1 { 
     -moz-column-count: 2; 
     -moz-column-gap: 10px; 
     -webkit-column-count: 2; 
     -webkit-column-gap: 10px; 
     column-count: 2; 
     column-gap: 10px; 

}

這裏查看我的例子更多How to stack divs from top to bottom in CSS

閱讀本文的詳細http://www.quirksmode.org/css/multicolumn.html

來源

2011-09-06 11:09:28 sandeep

這[對IE不起作用，在所有]（http://caniuse.com/#search=column-count）。 –

是的; css3 column-count屬性在IE中不起作用，因此您可以使用js http://www.csscripting.com/css-multi-column/將其放在IE註釋中。 – sandeep

如何先垂直然後水平地製作div堆棧？

回答

相關問題