使用jQuery / CSS查找最高的所有元素[duplicate](Use jQuery/CSS to find the tallest of all elements [duplicate])

可能重复： CSS - 等高列？

我有3个div。

喜欢这个：

他们将被填充文本。我不知道有多少。事实是，它们都是平等的高度。

我如何使用jQuery（或CSS）找到最高的DIV，并将另外两个设置为相同的高度，创建3个相等的高度DIV。

这可能吗？

Possible Duplicate: CSS - Equal Height Columns?

I have 3 divs.

Like this:

They are going to be filled with text. I'm not sure how much. The thing is, it's imperative that they are all equal heights.

How can i use jQuery (or CSS) to find the tallest of the DIV's and set the other two to the same height, creating 3 equal height DIV's.

Is this possible?

最满意答案

你不能轻易地按照高度选择或在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); });

[Version 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 ）

You can't easily select by height or compare in CSS, but jQuery and a few iterations should easily take care of this problem. We'll loop through each element and track the tallest element, then we'll loop again and set each element's height to be that of the tallest (working JSFiddle):

$(document).ready(function() { var maxHeight = -1; $('.features').each(function() { maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height(); }); $('.features').each(function() { $(this).height(maxHeight); }); });

[Addendum]

Sheriffderek has crafted a JSFiddle for this solution in a responsive grid. Thanks!

[Version 2]

Here is a cleaner version using functional programming:

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

[Version 3 - sans jQuery]

Here's an updated version that doesn't use jQuery (working 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"; });

(and here it is in ES6)

更多推荐