插入容器底部的元素

查找要锁定到底部的查看按钮，使用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; 
}

有任何疑问请询问。

来源

2017-02-09 Kieran Smith

您需要使您的div.offer盒成为一个（嵌套）柔性容器。然后用弹性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

一些事情要记住：

来源

2017-02-09 12:59:30

插入容器底部的元素

回答

相关问题