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

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

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

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

我只在Chrome/FF测试，到目前为止，在IE浏览器没有检查呢。

Answer 2

您可以使用display：inline-block的

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

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

您可以添加清除DIV每隔2个块后如下：

<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.