使用 jQuery/CSS 查找所有元素中最高的
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6781031/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use jQuery/CSS to find the tallest of all elements
提问by benhowdle89
Possible Duplicate:
CSS - Equal Height Columns?
可能重复：
CSS - 等高列？
I have 3 divs.
我有 3 个 div。
Like this:
像这样：
<div class="features"></div>
<div class="features"></div>
<div class="features"></div>
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.
我如何使用 jQuery（或 CSS）来找到最高的 DIV 并将其他两个设置为相同的高度，从而创建 3 个等高的 DIV。
Is this possible?
这可能吗？
回答by ghayes
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):
在 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);
});
});
[Addendum]
[附录]
Sheriffderek has crafted a JSFiddle for this solution in a responsive grid. Thanks!
Sheriffderek在响应式网格中为此解决方案制作了一个 JSFiddle。谢谢！
[Version 2]
[第 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]
[版本 3 - 无 jQuery]
Here's an updated version that doesn't use jQuery (working JSFiddle):
这是一个不使用 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";
});
回答by kleinohad
you can use jquery each function:
您可以使用 jquery 的每个功能：
var highest;
var first = 1;
$('.features').each(function() {
if(first == 1)
{
highest = $(this);
first = 0;
}
else
{
if(highest.height() < $(this).height())
{
highest = $(this);
}
}
});
回答by Grigor
You may do three column div, but you gotta add wrapper around it like this
你可以做三列 div，但你必须像这样在它周围添加包装器
<div id="wrapper">
<div class="features"></div>
<div class="features"></div>
<div class="features"></div>
</div>
in head tags put this
在头标签把这个
<style type="text/css">
#wrapper {
position:relative;
overflow:hidden;
}
.features {
position:absolute;
float:left;
width:200px; /* set to whatever you want */
height:100%;
}
</style>
whatever one of the boxes width is, the others will get the same too. Hope this helps. I am sorry if it doesn't, I just made the code on the spot.
无论其中一个框的宽度是多少，其他框的宽度也会相同。希望这可以帮助。如果没有，我很抱歉，我只是当场制作了代码。
