寻找要锁定在底部的 View 按钮,使用 position:absolute;
会导致价格合并到 View 按钮中。
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 容器。然后用 flex auto
边距将 View 按钮固定到底部。
.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 */
}
还有几点需要注意:
关于html - 将元素固定到容器底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42137339/