在没有间隙/行的列中排列 div 块答案

【问题标题】：Lining up div blocks in columns with no gaps/rows在没有间隙/行的列中排列 div 块
【发布时间】：2014-04-03 01:26:35
【问题描述】：

我在 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/

【问题讨论】：

css-tricks.com/fluid-width-equal-height-columns
@ajc：目的是在一个盒子和它下面的另一个盒子之间没有间隙。所以这几乎就像按列堆叠它们，但是是动态的。
你的意思是你想让panel4上升到panel1的底部？
@King King：正确。基本上想知道 pinterest 或 gridster 布局是否仅在 CSS（无 JS）中是可能的。
对于任何好奇的人，我终于使用这个库找到了答案：salvattore.com

标签： jquery html css grid-layout

【解决方案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 添加到每个列。

希望这会有所帮助！

【讨论】：

我没有指定列，因为我需要它们是动态的。因此，当我删除/删除某些面板时，其他面板将填补空白。此外，默认情况下我只有大约 5-6 个面板（这不适用于像 pinterest 这样的大型内容布局）。如果我按照您的建议使用列样式并删除中间列中的所有面板，它会看起来很奇怪。
我检查了 pinterest 布局，我开始发现这可能无法仅在 CSS 中完成。 pinterest中所有的box都是使用position: absolute和坐标定位排列的。