垂直对齐具有不同高度的浮动 DIV？

Question

请参阅我的JSfiddle 以了解当前发生的情况

我有一些内容高度不同的 div 。宽度始终相同。

每行应该包含两列，但我希望一行中每个 div 的开头都处于相同的高度。与 jQuery Masonry 插件相比，所有“砖块”都挤在一起以删除空格。

有什么好的跨浏览器方法来实现这一目标？我的想法是清除每第二个 n 个孩子的浮动，但我相信 IE 不支持这个？

我相信我也可以用 jQuery 做一些事情，但是它整洁吗？我是否能学到一些东西以便下次问题发生时解决它？

HTML：

<div id="a" class="box">        Some content<br />Div A</div>
<div id="b" class="box">        Some content<br />Div B</div>
<div id="c" class="box">        Some content<br />Div C</div>
<div id="d" class="box">        Some content<br />Div D</div>
<div id="e" class="box">        Some content<br />Div E</div>
<div id="f" class="box">        Some content<br />Div F</div>

CSS：

.wrapper { width: 444px; }
.box {
    width: 200px;
    border: 1px solid #333;
    float: left;
    margin: 0 10px;
    }
#a { height: 200px; }
#b { height: 180px; }
#c { height: 100px; }
#d { height: 80px; }
#e { height: 50px; }
#f { height: 50px; }

Answer 1

您可以使用 display:inline-block

http://jsfiddle.net/Awg3u/1/

Answer 2

这就是你的想法吗？它确实使用了 jQuery 并添加了一些额外的标记 - 不确定这是否可以接受。

http://jsfiddle.net/Awg3u/7/

我只在 Chrome/FF 中进行了测试，所以到目前为止，还没有在 IE 中检查过。

Answer 3

您基本上想要找到每个盒子的最大高度，然后取最大的并将所有其他盒子设置为该高度。

应该有任意数量的 jQuery 插件可以做到这一点，或者你可以推出自己的插件

Answer 4

不确定我是否正确理解你想要什么。

如果不对请纠正我。

如果您希望行的所有第一个 div 具有相同的高度（基于第一个 div），您可以执行以下操作：

(function() {
    var first = true;
    var height = 0;
    var pos;
    $('.box').each(function() {
        if (first) { // do we have the first div?
            height = $(this).height(); // set height and pos from left of first div to be used by other divs
            pos = $(this).position();
        }
        first = false;

        var current_pos = $(this).position();
        if (current_pos.left == pos.left) { // are we the first div in a row, e.g. the most left div?
            $(this).height(height); // set height to match the first div
        }
    });
})(jQuery);

http://jsfiddle.net/Awg3u/3/

Answer 5

您可以在每 2 个块之后添加清除 div，如下所示：

<div class="box"></div>
<div class="box"></div>
<div class="clear"></div>
<div class="box"></div>
<div class="box"></div>
<div..................>

或者您可以将行包装在新的 DIV 中。

<div>
<div class="box"></div>
<div class="box"></div>
</div>
<div>
<div class="box"></div>
<div class="box"></div>
</div>
.......etc.