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

我有一些带有不同文本内容的DIV标签.

Boxes">
    Boxone">
        Boxtwo">
        Boxthree">
        Boxfour">


它们采用2×2布局,宽度适中：
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的高度不需要再次更改,这很有效.
但是,如果我调整浏览器窗口大小,则会失败：
>如果我(a)使浏览器更宽,那么(b)我的
DIV变宽,然后(c)他们的文本
内容包裹次数减少,然后(d)
我的DIV太高了.
>如果我(b)使浏览器更窄,
然后(b)我的DIV变得更窄,然后(c)
他们的文字内容包含更多,并且
然后(d)我的DIV太短了.
我如何(1)自动将DIV大小调整到正常的内容高度,还(2)保持多个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);

我注意到的一件事是,IE真的有50％宽浮动div的四舍五入的问题…如果我将它们改为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);
    });
}


 原文链接：https://www.f2er.com/html/426638.html

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

猜你在找的HTML相关文章