如何堆棧頂部的div至底部CSS

我有去像這樣的列表：如何堆棧頂部的div至底部CSS

<div class="item">1</div> 
<div class="item">2</div> 
<div class="item">3</div> 
<div class="item">4</div> 
<div class="item">5</div>

使用左CSS的float，它看起來像這樣的HTML：

1 2 
3 4 
5

是它可能風格我的div看起來像下面：

1 4 
2 5 
3

希望有人能幫助，謝謝！

來源

2011-09-01 Funky

我覺得我想要更多的信息也許。我的意思是..要得到你想要的東西..你只需要分配內容的方式，它符合你的期望順序。就像你對數字所做的一樣。當然，除非你想考慮幾件事情，但那會起作用。 – Joonas

@ funky;您可以使用CSS3 column-count屬性用於此

CSS：

div#multicolumn1 { 
     -moz-column-count: 2; 
     -moz-column-gap: 50%; 
     -webkit-column-count: 2; 
     -webkit-column-gap: 50%; 
     column-count: 3; 
     column-gap: 50%; 

}

檢查此鏈接演示Div's in two columns

http://jsfiddle.net/sandeep/pMbtk/

注：它並不在IE瀏覽器。

來源

2011-09-01 09:33:09 sandeep

太棒了！這很好用，我不必添加另一列或做任何黑客！謝謝！ – Funky

樂意幫忙:) – sandeep

column-count：2;我想..順便說一句你好Funky：D – Fanky

最有可能你需要創建兩個div容器才能工作。一個容器1-3個，一個4-5個。

來源

2011-09-01 09:31:09 tskulbru

如果你不需要支持，即有css columns這將做到extoctly。

來源

2011-09-01 09:34:30 Litek

這個AListApart article談論了一堆不同的方式來支持這個寫好的CSS3。這裏總結時間太長，所以我只會發布鏈接。

來源

2012-01-17 04:19:47 mrtsherman

如何堆棧頂部的div至底部CSS

回答

相關問題