不使用列对齐框

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 s中的框分开（一个带float: left;，另一个带float: right），但这样可以避免，因为来自后端生成这个html内容作为小提琴中的布局？

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

Answer 1

您需要使用JavaScript或像砌体这样的JavaScript插件来计算div高度并调整它们以修复差距，或者只是稍微更改CSS。而不是将剩下的所有div浮动，交替使用它们：

<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

Answer 2

你可以做一个负边际底层。

.oddball {
    margin-bottom: -10px;
}

http://jsfiddle.net/Hunter275/9YSDG/3/

Answer 3

我更新了你的小提琴http://jsfiddle.net/raffi/9YSDG/5/

只需添加此jQuery代码：

var boxes = $('.box');
var max_height = 0;
var height = 0;
boxes.each(function() {
    height = $(this).height();
    if(height > max_height) {
       max_height = height;
    }
});
boxes.css('height', max_height);

Answer 4

将vertical-align: bottom;添加到 .box