コンテナの底面にピンをつける

Question

ビューボタンを下部にロックすると、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; 
} 

お問い合わせくださいご質問。

Answer 1

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

心に留めておくべきいくつかのより多くの事：

• Flex layout exists only between parent and child。

• Floats are ignored in a flex container。

• Avoid using percentages for margin and padding in a flex container。