jquery - 在没有间隙/行的列中排列div块

我有一堆3列布局的盒子/块。这些框使用类似float: left, width: 33%的样式，但是它们的高度不同。

我如何使之成为可能，以便它们始终填充“行”列之间的空隙（因此，第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面板之间始终存在差距。是否可以在CSS中完全不使用http://gridster.net/之类的js库来完成此操作？

我知道如何在静态布局中做到这一点（通过填充每列的内容），但是我将动态生成/删除面板，所以我不想将它们绑定到特定的列。

引导程序版本：http://jsfiddle.net/WhKLj/1/

最佳答案

您的html并不是进行pinterest布局的正确方法。
而不是对每个单独的元素使用float：left
使用三列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;
}

这样做可以，但是问题是您必须使用javascript / jquery将新的div.testpanels添加到每个列中。

希望这可以帮助！

关于jquery - 在没有间隙/行的列中排列div块，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22792790/