插入容器底部的元素

查找要鎖定到底部的查看按鈕，使用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

插入容器底部的元素

回答

相關問題