如何使 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中文网其他相关文章！