如何使用 jQuery 或 CSS 使多个 Div 元素等高？

如何使用 jQuery 或 CSS 实现等高元素

在 Web 开发中，垂直对齐元素以获得美观​​且一致的布局至关重要。这个问题解决了使多个 div 元素具有相同高度的挑战，即使它们包含不同数量的内容。

jQuery 解决方案

jQuery 是一个流行的 JavaScript 库，提供了一种简单的方法来识别最高的元素并设置其他元素的高度以匹配它：

$(document).ready(function() {
   var maxHeight = 0; // Initialize maxHeight to 0

   $('.features').each(function() { // Loop through each .features div
     if ($(this).outerHeight() > maxHeight) { // Compare the current div's height to maxHeight
       maxHeight = $(this).outerHeight(); // Update maxHeight if the current div is taller
     }
   });

   $('.features').each(function() { // Loop through each .features div again
     $(this).height(maxHeight); // Set the height of each div to maxHeight
   });
});

此脚本计算最高的 div 的高度并将其分配给所有具有以下元素的 div “.features”类，导致高度相等。

纯 CSS 解决方案

虽然 CSS 缺乏直接高度选择或比较功能，但可以使用 CSS 网格来解决问题：

.features-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(initial, 1fr));
  align-items: stretch;
}

.features {
  height: 100%;
}

以上是如何使用 jQuery 或 CSS 使多个 Div 元素等高？的详细内容。更多信息请关注PHP中文网其他相关文章！