如何使用 jQuery 或 CSS 使多個具有可變內容的元素具有相同的高度？

使用jQuery 和CSS 均衡元素高度

在多個文字內容不確定的元素的場景中，實現相同的高度以實現視覺一致性可能具有挑戰性。本文探討如何使用 jQuery 或 CSS 來解決這個問題。

jQuery 解決方案

jQuery 提供了一個簡單的解決方案來查找最高的元素並設置其他元素的高度因此。其實作方式如下：

$(document).ready(function() {
   var maxHeight = -1;

   $('.features').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.features').each(function() {
     $(this).height(maxHeight);
   });
 });

此程式碼使用「features」類別迭代每個元素，並更新 maxHeight 變數以追蹤最高的元素。然後，它再次迭代，設定每個元素的高度以匹配 maxHeight。

CSS 解決方案

雖然CSS 不允許直接比較元素高度，但min-height、max-height和flexbox可以達到類似的效果：

.features {
  min-height: 100px;
  max-height: 500px;
  display: flex;
  flex-direction: column;
}

這段CSS代碼集每個.features 元素的最小和最大高度，確保它們不會縮小或擴展超出這些限制。 Flexbox 佈局確保它們垂直對齊，有效地均衡它們的高度。

透過利用 jQuery 或 CSS，您可以輕鬆確保元素具有相同的高度，無論其文字內容為何，從而保持視覺吸引力和一致演示。

以上是如何使用 jQuery 或 CSS 使多個具有可變內容的元素具有相同的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！