如何让CSS边框适配不同高度的react-photo-album图片底部？

你当前的问题在于给容器加了整体的左右边框，但没法让侧边边框适配不同列的高度，而且用:last-child只选中最后一列的话，其他列没有底部边框。可以通过把边框拆分到每个列元素上来解决：

步骤1：修改容器的CSS #

先去掉容器的左右和底部边框，只保留顶部边框和圆角，同时调整内边距和列间距：

.react-photo-album {
    border-radius: 5px 5px 0 0;
    border-top: 4px solid #86afe1;
    padding: 3rem 0 2rem; /* 把左右内边距移到列上 */
    gap: 0; /* 列间距设为0，避免边框之间出现空隙 */
}

步骤2：给每个列添加边框 #

给每一列设置左右和底部边框，同时处理中间列的边框重叠问题，最后补上底部圆角：

/* 给所有列添加边框 */
.react-photo-album--column {
    border-left: 4px solid #86afe1;
    border-right: 4px solid #86afe1;
    border-bottom: 4px solid #86afe1;
    padding: 0 2rem; /* 还原原来容器的左右内边距 */
}

/* 让中间列的左边框和前一列的右边框重叠，避免双重边框 */
.react-photo-album--column:not(:first-child) {
    margin-left: -4px;
}

/* 给首尾列添加底部圆角，和容器的顶部圆角呼应 */
.react-photo-album--column:first-child {
    border-bottom-left-radius: 5px;
}

.react-photo-album--column:last-child {
    border-bottom-right-radius: 5px;
}

这样每个列的侧边边框会自动适配自身的高度（由列内图片高度决定），底部边框也会贴合每一列的底部，同时整体顶部保持统一的边框样式，完美匹配你想要的效果。

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