javascript - 使用 jQuery 实现等高的列

Question

我们可以使用 jQuery 创建等高的列吗？如果是，怎么办？

Answer 1

2022 年更新

JavaScript

对于这样的事情，jQuery 有点大材小用了；你可以使用普通的 JavaScript:

// Construct a NodeList of all column elements
const columns = document.querySelectorAll(".column");
// Determine the tallest Node in the list based on its offsetHeight
const tallest = Math.max( ...[ ...columns ].map( c => c.offsetHeight ) );
// Apply that height to all Nodes in the NodeList
columns.forEach( column => column.style.height = `${tallest}px` );

或者(最好)CSS

事实上，JavaScript 可能根本不应该被使用。现代浏览器已经支持Flexbox在相当长的一段时间内，它能够保持横向放置的元素等高:

假设以下内容(取自下面的原始演示):

<div class="container">
    <div class="column">Foo</div>
    <div class="column">Foo<br/>Foo<br/>Foo</div>
    <div class="column">Foo</div>    
</div>

Flexbox 使用以下内容创建等高的列(基于最高的列):

.container {
    display: flex;
}

<小时/>

原始答案

循环浏览每一列，找到最高的。然后将所有设置为该高度。

var maxHeight = 0;
$(".column").each(function(){
  maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight);​

在线演示:http://jsbin.com/afupe/2/edit