Question

查看我的JSfiddle以查看当前发生的情况

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

每行应该包含两列，但我希望连续的每个div的开头处于相同的高度。与此对比的是jQuery Masonry插件，其中所有“砖块”被挤压在一起以移除空间。

有什么好的，跨浏览器的方式来实现这一目标？我的想法是清除每个第二个孩子的浮动，但我相信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.

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

5 个答案: