jquery - 如何使用 jQuery 使多个 DIV 保持相同的高度？

Question

我有几个包含不同数量文本内容的 DIV 标签。

HTML:

<div id="boxes">
    <div id="boxone">
        <p>...</p>
    </div>
    <div id="boxtwo">
        <p>...</p>
    </div>
    <div id="boxthree">
        <p>...</p>
    </div>
    <div id="boxfour">
        <p>...</p>
    </div>
</div>

它们采用二乘二布局，宽度可变:

CSS:

div#boxes {
    width: 100%;
}

div#boxes div {
    width: 49.9%;
    float: left;
}

我希望它们的高度都相同。

因此，我遍历它们并找到最高的那个的高度。然后我再次循环并将它们全部设置为该高度。

jQuery:

$(function() {
    var maxHeight = 0;
    $('div#boxes div').each(function(){
        if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
    });
    $('div#boxes div').each(function(){
        $(this).height(maxHeight);
    });
});

如果 div 的高度不需要再次更改，这很有效。

但是，如果我调整浏览器窗口的大小，它会失败:

1. 如果我 (a) 使浏览器变宽，那么 (b) 我的DIV 变宽，然后 (c) 它们的文本内容包装次数较少，然后 (d)我的 DIV 太高了。

2. 如果我 (b) 使浏览器更窄，然后 (b) 我的 DIV 变窄，然后 (c)他们的文字内容包装得更多，并且然后 (d) 我的 DIV 太短了。

我如何既 (1) 自动将 DIV 的大小调整到正常内容的高度，又 (2) 使这些多个 DIV 保持相同的高度？

Answer 1

对于像我一样通过谷歌搜索解决方案来到这里的其他人:已接受答案的第一部分仅在第一个 div 最高时才有效。我对其进行了一些更改，现在它似乎适用于所有情况。

var highest = 0;
function sortNumber(a,b)    {
    return a - b;
}

function maxHeight() {
    var heights = new Array();
    $('#wrapper2>div').each(function(){
        $(this).css('height', 'auto');
        heights.push($(this).height());
        heights = heights.sort(sortNumber).reverse();
    });        
        highest = heights[0]; 
    $('#wrapper2>div').each(function(){
        $(this).css('height', highest);
    });

}

$(document).ready(function() {
    maxHeight();
})

$(window).resize(maxHeight);