Web開發中如何讓動態內容元素等高？

均衡動態內容元素的高度

在Web 開發中，經常會遇到這樣的情況：多個內容長度不同的元素需要具有相同的高度最佳佈局。其中一個例子是使用列來顯示清單或摘要。

jQuery 和 CSS 提供了解決方案來應對這項挑戰，並確保具有不同高度的元素自動調整為其中最高的元素。

jQuery 方法

jQuery 讓您輕鬆循環每個元素並使用 height() 方法識別最高的元素。透過在迭代期間追蹤最高元素的高度，您可以設定所有其他元素的高度以符合最高元素。

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

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

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

僅 CSS 方法

雖然 CSS 本身不提供直接支援根據高度選擇元素，您仍然可以透過使用 JavaScript 操作 DOM 並應用必要的 CSS 樣式來實現此功能。這種方法涉及創建一個新的 CSS 類別來設定元素的高度並將其動態添加到最高的元素。

// Loop through elements and find the tallest
const elements = document.querySelectorAll('.features');
let tallest = 0;

for (let i = 0; i  tallest) {
    tallest = height;
  }
}

// Create a new CSS class and set the height
const tallClass = document.createElement('style');
tallClass.innerText = '.tall { height: ' + tallest + 'px; }';

// Add the CSS class to the tallest element
const tallestElement = document.querySelector(`.features[offsetHeight='${tallest}']`);
tallestElement.classList.add('tall');

結論

使用 jQuery 或 CSS，您可以動態調整元素的高度以確保一致性，創建視覺上有吸引力且組織良好的佈局。

以上是Web開發中如何讓動態內容元素等高？的詳細內容。更多資訊請關注PHP中文網其他相關文章！