将元素固定到容器底部

【问题标题】：Pin element to the bottom of the container将元素固定到容器底部
【发布时间】：2017-06-27 12:00:37
【问题描述】：

寻找锁定在底部的查看按钮，使用position:absolute; 会导致价格合并到查看按钮中。

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;
}

有什么问题欢迎提问。

【问题讨论】：

标签： html css flexbox css-position

【解决方案1】：

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

.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 */
}

revised fiddle

还有几点要记住：

【讨论】：