如何实现按钮始终固定在div容器底部？

要让按钮固定在盒子底部，利用Flex布局的特性就能轻松实现，具体修改如下：

1. 调整父容器样式 #

给.toate-ofertele-ed添加align-items: stretch，确保所有.oferta盒子高度一致；给.oferta补充底部内边距避免按钮贴边，同时设置flex:1让盒子平分宽度：

.toate-ofertele-ed{
    display: flex;
    align-items: stretch; /* 让所有子项高度统一 */
    gap: 1rem; /* 可选：添加盒子间距，优化视觉 */
}
.oferta{
    display: flex;
    flex-direction: column;
    border:solid;
    color: var(--midnightBlue);
    padding-bottom: 20px; /* 给按钮留底部空间 */
    flex: 1; /* 让每个盒子平分可用宽度 */
}

2. 固定按钮到底部 #

给按钮容器添加margin-top: auto，在垂直Flex布局中，这个属性会自动把元素推到容器最底部，同时保留右对齐样式：

.oferta-btn-container{
    display: flex;
    justify-content: flex-end;
    margin-top: auto; /* 关键属性：将按钮挤压至底部 */
    padding: 0 20px; /* 左右内边距，和文本区域对齐 */
}

3. 优化HTML结构 #

把按钮的内联样式替换为上述类名，保持代码整洁：

<div class="oferta">
    <div class="oferta-text">
        <p>PROFIL REAL</p>
        <ul>
            <li>Matematică-Informatică Bilingv<span>26 locuri</span></li>
            <li>Matematică-Informatică <span>26 locuri</span></li>
            <li>Ştiinţe ale naturii <span>52 locuri</span></li>
        </ul>
    </div>
    <div class="oferta-btn-container">
        <button>VEZI MAI MULT &#10230;</button>
    </div>
</div>

原理说明 #

• align-items: stretch 确保所有.oferta盒子高度一致，避免内容少的盒子偏矮，导致按钮位置参差不齐。
• margin-top: auto 是Flex布局的核心技巧：垂直方向的容器中，该属性会自动计算顶部剩余空间，将元素挤压至底部，无论上方内容多少都能保持固定位置。

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