垂直對齊不同高度的浮動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.