html - 不使用列对齐框

Question

我有这个 HTML 结构:

<div class="box_holder">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box" style="height: 220px;background-color: black;"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="clear"></div>
</div>

这是我的 CSS(基本上):

.box_holder {
    width: 440px;
}
.clear { clear:both;}
.box {
    width:200px;
    height: 200px;
    margin: 10px;
    float: left;
    background: red;
}

使用上面的代码链接到 JSFiddle:http://jsfiddle.net/9YSDG/

我正在尝试删除我用绿色箭头标记的空间:

当我的 div.box-es 具有不同的高度时，就会显示这个空间。我想我必须将盒子分成两个不同的 div(一个带有 float: left;，另一个带有 float: right)但是可以避免这种方式吗，因为来自后端的数据会生成此 html 内容作为 fiddle 中的布局？

编辑:框的内容是不同长度的文本。如果我使用相同的高度，数据将不会以一种很好的方式显示，因为一些 div 可能有一个句子，其他人可能有 4 个或类似的东西。

Answer 1

您需要使用 JavaScript 或类似 masonry 的 JavaScript 插件来计算 div 高度并调整它们以修复间隙，或者只需稍微更改 CSS。不要让所有的 div 都 float ，而是交替它们:

<div class="box_holder">
    <div class="box l"></div>
    <div class="box r"></div>
    <div class="box l"></div>
    <div class="box r" style="height: 220px"></div>
    <div class="box l"></div>
    <div class="box r"></div>
    <div class="box l"></div>
    <div class="box r"></div>
    <div class="clear"></div>
</div>
.l {
    float: left;
}
.r {
    float: right;
}

jsFiddle example