排列沒有空白/行的div塊

我在3列布局中有一堆框/塊。這些箱子使用類似float: left, width: 33%的風格，但它們的高度各不相同。排列沒有空白/行的div塊

我該如何使它成爲可能，以便它們將始終填充列「行」之間的間隙（因此第4列將在第1列之下，而且沒有間隔）。

例子：

<style> 
.testpanel { width: 33%; border: 1px solid black; float:left;} 
</style> 
<div class="testpanel"> 
    Panel 1 
</div> 
<div class="testpanel"> 
    Long Panel 1 
    <br /><br /><br /> 
</div> 
<div class="testpanel"> 
    Long Panel 2 
    <br /><br /><br /> 
</div> 
<div class="testpanel"> 
    Panel 4 
</div>

總有那麼我想封閉面板1和第4小組之間的間隙。如果不使用像http://gridster.net/這樣的js庫，可以在CSS中做到這一點嗎？

我知道如何在靜態佈局中（通過填充每列的內容），但我會動態地生成/刪除面板，所以我不想將它們綁定到特定的列。

引導版本：http://jsfiddle.net/WhKLj/1/

來源

2014-04-01 Radius K.

http://css-tricks.com/fluid-width-equal-height-columns/ – ajc

@ajc：意圖是在盒子和其下面的盒子之間沒有空隙。所以這幾乎就像是按列堆疊它們，但是是動態的。 –

你的意思是你想'panel4'上去並觸摸'panel1'的底部？ –

你的心不是HTML做Pinterest的一種佈局的正確方式。而是採用浮動：左到每個元素採用三個欄div的

HTML：

<div class="column" id="left"> 
    <div class="testpanel"></div> 
    <div class="testpanel"></div> 
    <div class="testpanel"></div> 
</div> 
<div class="column" id="center"> 
    <div class="testpanel"></div> 
    <div class="testpanel"></div> 
    <div class="testpanel"></div> 
</div> <div class="column" id="right"> 
    <div class="testpanel"></div> 
    <div class="testpanel"></div> 
    <div class="testpanel"></div> 
</div>

CSS：

.column{ 
    float:left; 
} 
.testpanel{ 
    margin-bottom::10px; 
}

這會做，但問題是u必須使用JavaScript/jquery爲每個列添加新的div.testpanels。

希望這會有所幫助！

來源

2014-04-01 17:35:58

我沒有指定列，因爲我需要它們是動態的。所以當我刪除/刪除一些面板時，其他人會填補這些空白。此外，我只有約5-6個面板默認情況下（這不是像pinterest大內容佈局）。如果我按照您的建議使用列樣式，並刪除中間列的所有面板，則會看起來很奇怪。 –

我檢查了pinterest佈局，我開始發現這可能無法在CSS中完成。 pinterest中的所有框都使用'position：absolute'和座標定位進行排列。 –

排列沒有空白/行的div塊

回答

相關問題