jquery - 在多个div上设置相同的高度

Question

我需要在另一个 div 包装器内的一系列 div 上设置相等的高度。问题是我不希望所有的高度都相同。页面类型有 3 列， float div 可以是 1、2 或 3 列宽。 div 向左浮动，因此下面的示例将在包装器中提供三行 div。如何在同一行的div上设置相同的高度？在我的示例中，我希望 nr 1 和 2 具有相同的高度，而 3、4 和 5 具有相同的高度？我事先无法知道有多少个 div 或者它们有多宽或多高。 编辑:它们的宽度可以是 300、600 或 900 像素，页面宽度为 900 像素

<div id="wrapper">
 <div class="one-wide">nr1</div>
 <div class="two-wide">nr2</div>
 <div class="one-wide">nr3</div>
 <div class="one-wide">nr4</div>
 <div class="one-wide">nr5</div>
 <div class="three-wide">nr6</div>
</div>

我想我需要弄清楚 div 的添加宽度何时达到整个页面宽度，并在这些上设置相等的高度。然后对下一个 div 执行相同的操作。但我无法理解它。目前我只是用它来设置包装器子级的高度:

$.fn.equalHeights = function(px) {
$(this).each(function(){
    var currentTallest = 0;
    $(this).children().each(function(i){
        if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
    });
    // for ie6, set height since min-height isn't supported
    if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
    $(this).children('div').css({'min-height': currentTallest}); 
});
return this;
};

Answer 1

跟踪宽度，当它们加起来达到总宽度时，调整列的大小(跟踪您查看过的列或可能更容易的列)，然后重置 currentTallest 变量。因此，每次到达行尾时，您都会在循环内调整大小。