如何在banner底部放置2个按钮？有没有比设置padding更简洁的实现方案？

云上老周

2026-10-1

优化方案

你当前使用固定padding的方案适配性较差，只要banner高度调整就需要同步修改padding值，维护成本高。推荐使用Flex布局实现按钮固定吸附在banner底部，无需计算固定间距，适配性更强，且不需要修改原有HTML结构：

调整后的CSS代码

仅需要修改两个CSS选择器的属性即可：

#money {
    background: url('https://zupimages.net/up/20/20/vreu.jpg') no-repeat;
    height: 565px;
    width: 100%;
    background-size: cover;
    /* 新增3行Flex布局属性 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#money .btn-money {
    text-align: center;
    text-transform: uppercase;
    font-size: 26px;
    /* 替换原有固定padding，按需调整数值控制按钮和底部的距离 */
    padding-bottom: 20px;
}