将元素固定到容器底部 [英] Pin element to the bottom of the container

查看：121 发布时间：2020/10/12 19:27:43 html css flexbox css-position

本文介绍了将元素固定到容器底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用 position：absolute;将视图按钮锁定在底部，会导致价格合并到视图按钮中。

Looking for the View Button to be locked to the bottom, using position:absolute; would cause the price to merge into the View Button.

https://jsfiddle.net/kieranbs96/pj8emf0a/

a.view-button {
 float: left;
 padding: 7px 30px;
 background: #e35f00;
 color: #ffffff;
 text-transform: uppercase;
}

.offer, .recommendation {
 float: left;
 flex: 1 0 32%;
 margin: 0 0.3%;
 width: 32%;
 position: relative;
}

有任何疑问请问。

推荐答案

您需要在列方向上将 div.offer 框设为（嵌套的）flex容器。然后使用灵活的 auto 边距将视图按钮固定在底部。

You need to make your div.offer box a (nested) flex container in column-direction. Then pin the view button to the bottom with a flex auto margin.

.offer, .recommendation {
    float: left;
    flex: 1 0 32%;
    margin: 0 0.3%;
    width: 32%;
    position: relative;

    display: flex;          /* new */
    flex-direction: column; /* new */
}

a.view-button {
    float: left;
    padding: 7px 30px;
    background: #e35f00;
    color: #ffffff;
    text-transform: uppercase;
    position: relative;
    bottom: 0;
    left: 0;

    margin-top: auto;       /* new */
}

修订过的小提琴

还有几件事要记住：