如何修复多个class为bbb的div高度不一致问题？

情况1：空div高度异常（排除浏览器默认样式干扰） #

如果是浏览器默认样式（比如line-height、vertical-align）导致空div高度不等于设置的2px，可以在.bbb的CSS里补充属性强制高度生效：

.bbb {
    width: 333px;
    height: 2px;
    max-height: 2px;
    background: black;
    /* 新增属性清除默认样式干扰 */
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    box-sizing: border-box;
}

这些属性会清空空元素的默认行高、字体大小带来的额外高度，确保设置的height:2px完全生效。

情况2：div包含内容导致高度不同 #

如果div内有文本或其他元素，导致高度不一致，推荐两种方案实现统一高度：

方案A：纯CSS Flex布局（推荐）

给所有.bbb添加父容器，利用flex特性让子元素自动等高：

<!-- 新增父容器包裹所有.bbb -->
<div class="bbb-container">
    <div class="bbb">内容1</div>
    <div class="bbb">内容2<br>多行内容</div>
    <div class="bbb">内容3</div>
</div>

.bbb-container {
    display: flex;
    flex-direction: column; /* 保持垂直排列，和原布局一致 */
    gap: 20px; /* 替代原有的<br><br>，控制元素间距 */
}
.bbb {
    width: 333px;
    background: black;
    color: white; /* 示例文本颜色，可根据需求调整 */
    /* 无需固定height，flex会自动让所有子元素匹配最高高度 */
}

这种方案无需JS，纯CSS实现，兼容性好。

方案B：JavaScript动态计算高度

如果无法修改HTML结构，用JS遍历元素计算最高高度后统一设置：

// 获取所有.bbb元素
const bbbElements = document.querySelectorAll('.bbb');
// 计算所有元素中的最高高度
let maxHeight = 0;
bbbElements.forEach(el => {
    const currentHeight = el.offsetHeight;
    if (currentHeight > maxHeight) {
        maxHeight = currentHeight;
    }
});
// 给所有元素设置统一高度
bbbElements.forEach(el => {
    el.style.height = `${maxHeight}px`;
});

注意：如果内容是动态加载的，需要在内容加载完成后再执行这段代码。

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