如何讓 Flexbox 網格中大小不均的標題具有相同的高度？

Flexbox 網格中高度不均勻的標題

問題

Flexbox 網格中的子div 需要相等的高度，包括其底部位置的2- h2 行標題。

Flexbox限制

不幸的是，僅使用 Flexbox 或 CSS 實現統一的標題高度是不可行的。 Flexbox 的預設行為「flex 等高列」僅適用於相同容器內的 Flex 項目子項。

建議的解決方案

作為替代方案，請考慮使用 jQuery 等 JavaScript 函式庫來動態匹配最高標題的高度。即使元素駐留在不同的容器中，此方法也可以靈活處理不均勻的標題長度。

程式碼片段

$(document).ready(function() {
  $(".block-list").each(function() {
    let max_height = 0;
    $(this).find("h2").each(function() {
      max_height = Math.max(max_height, $(this).height());
    });
    $(this).find("h2").height(max_height);
  });
});

以上是如何讓 Flexbox 網格中大小不均的標題具有相同的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！