Question

我在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库？

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

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

Answer 1

你的HTML不是做出最好的布局的正确方法。而不是使用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。

希望这有帮助！

在列中排列div块，没有间隙/行

1 个答案: