使用jQuery / CSS查找所有元素中的最高元素

可能重复:
CSS-等高列?

我有3个div。

像这样:

<div class="features"></div>
<div class="features"></div>
<div class="features"></div>

他们将充满文字。 我不确定多少。 问题是,所有高度都必须相等。

我如何使用jQuery(或CSS)查找DIV中最高的并将其他两个设置为相同的高度,从而创建3个相等高度的DIV。

这可能吗?

benhowdle89 asked 2019-10-08T03:56:36Z
3个解决方案
183 votes

您不能轻松地通过高度选择或在CSS中进行比较,但是jQuery和一些迭代应该可以轻松解决此问题。 我们将遍历每个元素并跟踪最高的元素,然后再次遍历并将每个元素的高度设置为最高(正在工作的JSFiddle):

 $(document).ready(function() {
   var maxHeight = -1;

   $('.features').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.features').each(function() {
     $(this).height(maxHeight);
   });
 });

[附录]

Sheriffderek在响应网格中为此解决方案设计了一个JSFiddle。 谢谢!

[版本2]

这是使用函数式编程的更干净的版本:

$(document).ready(function() {
  // Get an array of all element heights
  var elementHeights = $('.features').map(function() {
    return $(this).height();
  }).get();

  // Math.max takes a variable number of arguments
  // `apply` is equivalent to passing each height as an argument
  var maxHeight = Math.max.apply(null, elementHeights);

  // Set each height to the max height
  $('.features').height(maxHeight);
});

[版本3-Sans jQuery]

这是一个不使用jQuery的更新版本(正在运行JSFiddle):

var elements = document.getElementsByClassName('features');

var elementHeights = Array.prototype.map.call(elements, function(el)  {
  return el.clientHeight;
});

var maxHeight = Math.max.apply(null, elementHeights);

Array.prototype.forEach.call(elements, function(el) {
  el.style.height = maxHeight + "px";
});

(这里是ES6)

ghayes answered 2019-10-08T03:57:32Z
3 votes

您可以使用jquery的每个函数:

var highest;
var first = 1;
$('.features').each(function() {
   if(first == 1)
   {
        highest = $(this);
        first = 0;
   }
   else
   {
        if(highest.height() < $(this).height())
        {
              highest = $(this);
        }
   }
  });
kleinohad answered 2019-10-08T03:57:55Z
0 votes

您可以做三列div,但是您必须像这样在其周围添加包装器

<div id="wrapper">
 <div class="features"></div>
 <div class="features"></div>
 <div class="features"></div>
</div>

在头标签里放这个

<style type="text/css">
#wrapper {
  position:relative;
  overflow:hidden;
}

.features {
  position:absolute;
  float:left;
  width:200px; /* set to whatever you want */
  height:100%;
}
</style>

无论其中一个框的宽度是多少,其他框也将相同。 希望这可以帮助。 很抱歉,如果没有,我只是当场编写了代码。

Grigor answered 2019-10-08T03:58:32Z
translate from https://stackoverflow.com:/questions/6781031/use-jquery-css-to-find-the-tallest-of-all-elements