將1列轉換爲2

Question

我遇到了一個問題，我只給一個內部大約10個div的容器div。我想找到一種方法來將這1列的div變成2列而不添加額外的div（即不添加左列或右列的div）。我可以並且最希望找到一個CSS解決方案。

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

理想輸出：

1  2 
3  4 
5  6 

我試圖與浮動鬼混，但它沒有工作太清楚了。請告訴我。謝謝！

Answer 1

那樣：http://jsfiddle.net/Qzj2d/？這是最簡單的解決方案（不需要最漂亮的解決方案）。

Answer 2

將您的內部div設置爲您容器寬度的一半並將它們浮動。例如

.container { width:600px;} 

.container div { 
    width:300px; 
    float:left; 
} 

工作實例http://jsfiddle.net/k2tQG/

Answer 3

我覺得display: inline-block比float更好，因爲元素的高度可能會有所不同。但是您需要在.container上設置font-size至0，然後在元素上重置它。

jsfiddle example

Answer 4

我知道，更適合的解決方案已經張貼在這裏和支持在很大程度上缺少，我要做出建議，但您可以使用新的CCS3任何的div分成任何數量的列列數和列間隙屬性。

這個鏈接可以在這裏看到：

http://www.quirksmode.org/css/multicolumn.html

我頗爲失望的是，這種支持是如此之低，因爲這些特性將允許真正的「打印式」佈局，如​​果支持我們不必清楚：既要使我們的父div和子div正確對齊。我知道我在這裏打開一罐蠕蟲，但這是迄今爲止最好的選擇。

我聽到很多人問列的佈局，爲什麼哦爲什麼我們不能支持使用已經存在的技術......？對不起，咆哮