html三个div相同高度,如何使用jquery保持多个div的高度相同?

更新

…在尝试并找到另一种显然可行的方法后,完全重写此答案:

function sortNumber(a,b) {

return a - b;

}

function maxHeight() {

var heights = new Array();

$('div#boxes div').each(function(){

$(this).css('height', 'auto');

heights.push($(this).height());

heights = heights.sort(sortNumber).reverse();

$(this).css('height', heights[0]);

});

}

$(document).ready(function() {

maxHeight();

})

$(window).resize(maxHeight);

我注意到的一件事是,50%宽的浮动式沙发床确实存在舍入问题。如果我把它们改成49%,效果会好得多。

这个jquery工作…

// global variables

doAdjust = true;

previousWidth = 0;

// raise doAdjust flag every time the window width changes

$(window).resize(function() {

var currentWidth = $(window).width();

if (previousWidth != currentWidth) {

doAdjust = true;

}

previousWidth = currentWidth;

})

// every half second

$(function() {

setInterval('maybeAdjust()', 500);

});

// check the doAdjust flag

function maybeAdjust() {

if (doAdjust) {

adjustBoxHeights();

doAdjust = false;

}

}

// loop through the DIVs and find the height of the tallest one

// then loop again and set them all to that height

function adjustBoxHeights() {

var maxHeight = 0;

$('div#boxes div').each(function(){

$(this).height('auto');

if (maxHeight < $(this).height()) {maxHeight = $(this).height()}

});

$('div#boxes div').each(function(){

$(this).height(maxHeight);

});

}