如何使用 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 的高度並將其指派給具有「.features」類別的所有div，從而獲得相等的高度。

純 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中文網其他相關文章！