基于内容实现Div等高显示的技术问题求助

一、最优方案：Flex布局修正版 #

你之前用Flex时出现宽度异常，是因为没正确配置容器和子元素属性，以下是修正后的CSS：

/* 替换原有的content_wrap和partner_wrap样式 */
.content_wrap.partner_wrap {
    max-width: 70%;
    width: 70%;
    margin: -100px auto 0 auto;
    display: flex;
    gap: 20px; /* 控制卡片间距，替代原stretch元素 */
}

/* 替换原有的partner样式 */
.partner {
    flex: 1; /* 让每个卡片平分容器宽度 */
    min-width: 0; /* 解决长文本撑开宽度的问题 */
    background-color: #fefefe;
    background-image: url('../img/concrete-seamless.png');
    background-repeat: repeat;
    padding: 25px 25px 0 25px;
}

关键修复点：

• 容器设置为display:flex，通过gap控制间距，移除原有的text-align:justify和stretch元素（Flex布局无需这些）
• 给.partner添加flex:1实现宽度均分，min-width:0打破Flex子元素默认的最小宽度限制，避免长文本破坏宽度比例
• 移除.partner原有的display:inline-block、width:28%、vertical-align等属性，由Flex布局接管排版

二、原有方案问题分析 #

1. Flex方案失败原因：
   仅设置flex:1但未给容器明确宽度约束，且未添加min-width:0，导致长文本强制撑开子元素宽度，破坏了预期的28%比例。

2. JavaScript方案失效原因：

   • window.load触发时机过晚（需等待所有资源加载完成），换成DOMContentLoaded会更及时：

     document.addEventListener('DOMContentLoaded', function() {
       const partners = document.querySelectorAll('.partner');
       let maxHeight = 0;
       partners.forEach(el => {
         maxHeight = Math.max(maxHeight, el.offsetHeight);
       });
       partners.forEach(el => {
         el.style.height = `${maxHeight}px`;
       });
     });
     

   • 原代码中.partner是inline-block，存在垂直空白间距，导致offsetHeight计算出现误差。

3. Grid方案未生效原因：
   Grid容器的直接子元素是<a>标签而非.partner，Grid的等高规则作用在<a>上，但.partner未占满<a>的高度。修正后的Grid方案：

   .content_wrap.partner_wrap {
       max-width: 70%;
       width: 70%;
       margin: -100px auto 0 auto;
       display: grid;
       grid-template-columns: repeat(3, 1fr); /* 3列均分 */
       gap: 20px;
   }
   .partner_wrap a {
       display: block; /* 让a标签占满Grid单元格高度 */
   }
   .partner {
       width: 100%;
       height: 100%; /* 让partner占满a标签的高度 */
       /* 保留原有背景、padding等样式 */
   }
   

三、效果验证 #

以上两种CSS方案（Flex/Grid）都能让三个.partner自动匹配最高元素的高度，其中Flex方案代码更简洁，兼容性更优（支持所有现代浏览器及IE10+）。

内容的提问来源于stack exchange，提问作者Dreamnation