使用jQuery / CSS来查找所有元素中最高的
可能重复：
CSS – 等高度列？
我有3个div。
喜欢这个：
<div class="features"></div> <div class="features"></div> <div class="features"></div> 他们将被充满文本。 我不知道多less。 事情是，他们都是平等的高度是必要的。
我如何使用jQuery（或CSS）来find最高的DIV，并将其他两个设置为相同的高度，创build3个相等的高度DIV。
这可能吗？
你不能容易地select高度或比较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 在响应式网格中为此解决scheme制作了一个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 – 无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 ）
你可以使用jQuery的每个函数：
var highest; var first = 1; $('.features').each(function() { if(first == 1) { highest = $(this); first = 0; } else { if(highest.height() < $(this).height()) { highest = $(this); } } });
你可以做三列的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>
无论宽度是多less，其他的都会一样。 希望这可以帮助。 如果没有，我很抱歉，我只是当场做了代码。
