將div顯示爲行顯示爲div顯示爲列

我有以下div。假設每個div都向左浮動或將顯示設置爲內聯塊。將div顯示爲行顯示爲div顯示爲列

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

我想要實現這樣的

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

我知道我可以通過逐列，因爲這

<div class="col1"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
<div class="col2"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
<div class="col3"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div>

，但在我的網站做到這一點有更多的網頁這樣的，所以我希望在不觸及標記的情況下實現。有沒有任何想法用CSS或任何JavaScript/jQuery方法執行此操作？

來源

2013-07-01 Bhojendra Nepal

可能重複絕對div堆棧佈局]（http://stackoverflow.com/questions/7109362/how-to-replicate-pinterest-coms-absolute-div-stacking-layout） – Antony

使用JS和jQuery它很容易把「碟中諜「到」愛麗絲夢遊仙境「：

LIVE DEMO

HTML樣本：

<div id="cont"> 

    <div></div> 
    <!-- ...more <div></div> here ... --> 

</div>

CSS試樣（.col將通過jQuery的添加）：

#cont .col > div{ 
    position:relative; 
    width:250px; 
    background:#eee; 
    margin:2px; 
    padding:15px; 
} 

.col{ 
    float:left; 
}

jQuery的：如何複製pinterest.com年代

$(function(){ 

    var cells = $('#cont > div'); 

    for(var i = 0; i < cells.length; i+=3) { 
     cells.slice(i, i+3).wrapAll("<div class='col' />"); 
    } 

});

來源

2013-07-01 04:18:02

@ C-Link不客氣！ :)很高興你做到了！我擔心你被困在jQuery的基礎知識中......但是太棒了！ –

剩下的事情還有一件事：我的網站有14個div，所以我做了i + 5，如果是20，我會完成i + 7，但是我怎樣才能做到最好，我不需要編輯每個時間div增加。 –

-1

未觸及標記是什麼讓事情變得粘稠。大衛DeSandro做了很好的工作緊密級聯電網系統與jQuery稱爲砌體，它也許能夠幫你出這一點：

http://masonry.desandro.com/

來源

2013-07-01 03:44:26 j0sh1e

它是很好，你正試圖幫助提問者。但是，僅在某些情況下留下只有鏈接的答案可能有害。雖然現在你的回答很好，但如果鏈接永遠不會消失，你的回答就會失去它的價值。因此，如果您在回答中總結文章中的內容，這將會很有幫助。請參閱[本]（http://goo.gl/wQTjc）問題的澄清。 –

將div顯示爲行顯示爲div顯示爲列

回答

相關問題