如何实现三列布局中卡片高度随内部最长内容自动统一

解决方法 #

你之前设置的flex属性未生效的核心原因是你使用了浮动(float) 布局实现三列，上层flex容器的属性无法穿透作用到浮动的卡片容器上。只要将行容器改为flex布局，利用flex默认的align-items: stretch属性就可以实现同行所有列高度自动匹配最高值，具体修改如下：

• 首先替换.row的原有样式，改为flex布局：

.row {
    display: flex;
    flex-wrap: wrap; /* 小屏幕下自动换行，可按需保留或删除 */
    width: 100%;
    height: auto;
    gap: 0; /* 可按需调整列间距 */
}

• 删除.column33中的浮动规则，同时新增规则让卡片撑满列的高度：

.column33 {
    width: 33.3%;
    padding: 10px;
    /* 删掉原有的float:left规则 */
}
/* 新增规则 */
.column33 .box {
    height: 100%;
}

• （可选优化）如果希望所有卡片的申请按钮都统一对齐在底部，可以给.box补充flex垂直布局规则：

.product .box-container .box {
    /* 原有规则全部保留，新增以下2行 */
    display: flex;
    flex-direction: column;
}
/* 新增规则，让描述区域自动撑开剩余高度，把按钮挤到最底部 */
.product .box-container .box .quantity {
    flex-grow: 1;
}

以上修改不需要引入任何第三方框架，修改后同列所有卡片会自动以最高的卡片高度为准统一高度，下方新增的行也不会出现排版错位问题。

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