如何使 Flexbox 网格中大小不均的标题具有相同的高度？

Mary-Kate Olsen

发布： 2024-12-15 17:37:10

原创

788 人浏览过

How Can I Make Unevenly-Sized Headings in a Flexbox Grid Have Equal Heights?

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

来源：php.cn

上一篇：添加 CSS 边框时如何防止元素在悬停时移动？下一篇：“flex-shrink”如何与 Padding 和“box-sizing: border-box”交互？

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章