divs垂直堆棧順序而不是水平？

可能重複：
How to stack divs from top to bottom in CSS
How to make div stack first vertically then horizontally?divs垂直堆棧順序而不是水平？

浮動或內聯元素堆棧是這樣的：

 
----------------- 
| 1 | 2 | 3 | 4 | 
| 5 | 6 | 7 | 8 | 
-----------------

但我想堆疊起來是這樣的：

 
----------------- 
| 1 | 3 | 5 | 7 | 
| 2 | 4 | 6 | 8 | 
-----------------

約束：任意數量的元素。所有相同的大小。所有元素必須在同一個「級別」上，這意味着我們不能堆疊「對」的div。

可能嗎？

編輯：忘了提及，容器應該水平擴展，所以可以使用「固定」數量的「行」。

來源

2011-11-27 chris

是的，但你必須定義包裝元素_columns_，它們的行爲就像一個樣品。 - 這是你所稱的_pairs_？ – Smamatti

對「對」的評論基本上意味着不能訪問服務器端，因此這些元素必須作爲不可修改的「訂單」作爲「平面」列表處理。 – chris

可能的重複：[CSS：如何樣式div從上到下]（http://stackoverflow.com/questions/7268447/css-how-to-style-divs-top-to-bottom）和[如何使div首先垂直然後水平？）（http://stackoverflow.com/questions/7318819/how-to-make-div-stack-first-vertically-then-horizontally） –

在父元素上設置列數爲4。

#your-parent-element-id { 
    -moz-column-count: 4; 
    -moz-column-gap: 10px; 
    -webkit-column-count: 4; 
    -webkit-column-gap: 10px; 
    column-count: 4; 
    column-gap: 10px; 
}

請注意，這隻適用於相對較新的瀏覽器。

參見：http://www.quirksmode.org/css/multicolumn.html

來源

2011-11-27 20:51:31 Kris

請參閱http://jsfiddle.net/KLZUa/演示 – Kris

太糟糕了世界的一半不使用現代瀏覽器。這本身並不能解決「所有的元素都必須在同一'水平上'」。（重點是我的） – tybro0103

@ tybro0103：元素已經在同一層，我沒有觸及任何元素，只是CSS。 – Kris

我相信，在所有瀏覽器中最易於管理的選擇是每對夫妻元素包裝在另一個「列」分區：

<div class="column"> 
    <div>1</div> 
    <div>2</div> 
</div><div class="column"> 
    <div>3</div> 
    <div>4</div> 
</div><div class="column"> 
    <div>5</div> 
    <div>6</div> 
</div><div class="column"> 
    <div>7</div> 
    <div>8</div> 
</div>

...

div.column { 
    width:25% 
    float:left; 
}

大多數html是由服務器端編程語言提供的，通常使用某種模板引擎。在模板引擎（如ERB for Ruby或Smarty for PHP）中執行此操作非常簡單。

爲了您的「疊加」的高度問題，只是分配一個高度內的div

div.column div { 
    height:200px; 
}

來源

2011-11-27 20:55:30 tybro0103

-1：這不回答這個問題。「所有的元素必須在同一個」級別「，這意味着**我們不能堆疊」對「的div **。」（強調我的） – Kris

它現在。你的也不是。（重點是我的） – tybro0103

我並不是想嘗試一個小便比賽，只是保持網站的誠實。如果作者可以重新排列節點，這將是一個很好的解決方案。他說他不能壽。 – Kris

我有兩個解決方案。

首先，使用CSS3 nth-of-type：

div:nth-of-type(even){margin:50px 0 0 -50px;}

這種緩慢下降到未indeal排序，但總的格式被保留。

此外，您可以通過在每個其他項目上放置課程來獲得類似的效果。

Demo

來源

2011-11-27 21:23:15 bookcasey

divs垂直堆棧順序而不是水平？

回答

相關問題