如何使用jQuery保持多个DIV相同的高度？ [英] How do I keep multiple DIVs the same height using jQuery?

问题描述

我有几个不同数量文字内容的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& ）.high（）{maxHeight = $（this）.height（）} 
}）; 
 $（'div＃boxes div' （this）.height（maxHeight）; 
}）; 
}）; 
  

如果div的高度不需要再更改，

但是，如果我调整浏览器窗口大小，就会失败：

1. a）使浏览器更宽，然后（b）我的
   DIV更宽，然后（c）他们的文本
   内容包裹更少次，然后（d）
   我的DIV太高。

如果我（b）使浏览器更窄，
然后（b）我的DIV变窄，然后（c）

如何使用我这两个（1）自动调整DIVs到它们的内容的高度像正常，但也（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（）; 
}）
 
 $ .resize（maxHeight）; 
  

我注意到的一件事是，IE真的有四舍五入的烦恼与50％宽浮动divs ...

这个jQuery工作...

  //全局变量
 
 doAdjust = true; 
 previousWidth = 0; 
 
 //每次窗口宽度改变时调用doAdjust标志
 
 $（window）.resize（function（）{
 var currentWidth = $（window）。 width（）; 
 if（previousWidth！= currentWidth）{
 doAdjust = true; 
} 
 previousWidth = currentWidth; 
}）
 $ b b //每半秒
 
 $（function（）{
 setInterval（'maybeAdjust（）'，500）; 
} 
 
 //检查doAdjust标志
 
 function maybeAdjust（）{
 if（doAdjust）{
 adjustBoxHeights（）; 
 doAdjust = false; 
} 
} 
 
 //循环遍历DIV并找到最高的一个的高度
 //然后再次循环并将它们全部设置为该高度
 
 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）; 
}）; 
} 
  

I've got a few DIV tags with different amounts of text content.

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>

They're in a two-by-two layout and their width is fluid:

CSS:

div#boxes {
    width: 100%;
}

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

I want them all the same height.

So, I loop through them and find the height of the tallest one. Then I loop again and set them all to that height.

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);
    });
});

This works well if the height of the div doesn't need to change again.

But, it fails if I resize the browser window:

1. If I (a) make the browser wider, then (b) my DIVs get wider, then (c) their text content wraps fewer times, and then (d) my DIVs are too tall.

2. If I (b) make the browser more narrow, then (b) my DIVs get narrower, then (c) their text content wraps more, and then (d) my DIVs are too short.

How do I both (1) automatically size DIVs to the height of their content like normal, but also (2) keep those multiple DIVs the same height?

解决方案

Update... completely rewriting this answer after experimenting and finding another, apparently workable way to do this:

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);

One thing I noticed is that IE really has rounding troubles with 50% wide floated divs... the rendering was much better if I changed those to 49%.

This jQuery works...

// 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);
    });
}

这篇关于如何使用jQuery保持多个DIV相同的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！