将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显示为列

回答

相关问题