Pin-Element an der Unterseite des Containers

Question

Wenn Sie nach der View-Schaltfläche suchen, die nach unten gesperrt wird, würde position:absolute; dazu führen, dass der Preis in die View-Schaltfläche übergeht.

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

noch Fragen wenden Sie sich bitte.

Answer 1

Sie müssen Ihre div.offer Box einen (verschachtelten) Flex-Container in Spaltenrichtung machen. Dann fixieren Sie den Ansichtsknopf mit einem Flex auto Rand nach unten.

.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

Noch ein paar Dinge im Auge zu behalten:

• 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.