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

我有一些具有不同数量文本内容的 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 相同的高度？

对于像我一样通过 Google 搜索解决方案来到这里的其他人：接受的答案的第一部分仅在第一个 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);