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

Question

我在 3 列布局中有一堆框/ block 。这些框使用类似 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 之间始终存在我想要关闭的间隙。是否可以在不使用像 http://gridster.net/ 这样的 js 库的情况下在 CSS 中完全做到这一点？ ？

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

Bootstrap 版本:http://jsfiddle.net/WhKLj/1/

Answer 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 添加到每一列。

希望这对您有所帮助!