Trois cases réactives l'une à côté de l'autre où un bouton doit être aligné en bas

Question

J'ai trois cases l'une à côté de l'autre qui contiennent un en-tête, une image et un bouton en bas. La dernière case contient du texte sous l'image et l'image est plus courte que les deux premières. J'ai fait un stylo de code pour la référence: https://codepen.io/jessiemele/pen/aLmoYz. Vous pouvez voir lorsque vous réduisez l'écran, lorsque l'image devient plus petite, le bouton de la troisième case se déplace avec, mais les deux autres restent alignés les uns avec les autres. Comment puis-je obtenir ce bouton sur la troisième case pour rester en ligne avec les deux autres? mon html:

<div class="container"> 
<div class="trio"> 
<div class="col-sm-4"> 
<h3>The Enrollment Process</h3> 
<img class="homeImg" src="http://via.placeholder.com/340x280" /><a 
class="homeCTA" href="/timeline-pricing">View Enrollment Timeline &amp; 
Pricing</a> 
</div> 
<div class="col-sm-4"> 
<h3>The Curriculum</h3> 
<img class="homeImg" src="http://via.placeholder.com/340x280" /><a 
class="homeCTA" href="/curriculum">View the Curriculum</a> 
</div> 
<div class="col-sm-4"> 
<h3>Happenings</h3> 
<img class="homeImg" src="http://via.placeholder.com/340x149" /> 
<div class="box"> 
<p class="calenderDays">May 20th – Spring Cleaning Day<br/>May 29th – Closed 
for Memorial Day</p> 
</div> 
<a class="homeCTA" href="#">View the Full Calendar</a> 
</div> 
</div> 
</div> 

mon css:

a.homeCTA { 
color: #ed3e27; 
font-size: 18px; 
line-height: 48px; 
text-align: center; 
border: 2px solid #ed3e27; 
width: 100%; 
height: 50px; 
display: block; 
margin: 0 auto; 
margin-top: 10px; 
} 
img.homeImg { 
width: 100%; 
} 
.col-sm-4 { 
width: 30%; 
float: left; 
position: relative; 
min-height: 1px; 
padding-left: 15px; 
padding-right: 15px; 
} 
h3 { 
text-align: center; 
} 
p.calenderDays { 
padding: 20px 0 30px; 
text-align: center; 
line-height: 50px; 
} 
@media only screen and (max-width : 1280px) { 
.container { 
    width: 100%; 
    padding: 0 50px; 
} 
} 

Answer 1

Vous pouvez ajouter ce CSS à utiliser Flex sur ces éléments:

.trio { 
    display: flex; 
} 
.trio > * { 
    display: flex; 
    flex-direction: column; 
} 
.trio > * .homeCTA { 
    margin-top: auto; 
} 

https://codepen.io/anon/pen/XejEYN

(Le dernier aligne la règle le .homeCTA au bas des conteneurs flexibles tout aussi hauts)

Si vous avez seulement besoin ce au-dessus d'une certaine largeur, mettez dans une requête de médias, comme

@media only screen and (min-width : 1280px) { ... } 

Answer 2

J'ai une suggestion dans ce problème, mais je ne sais pas si elle est ok pour vous. Je change une structure d'un HTML. J'ai donc extrait des boutons d'un conteneur dans votre code où, dans ce contaiener, on trouvait des images, des textes, des boutons et des boutons d'autres façons. Voici par exemple Votre HTML doit être quelque chose comme ceci:

<div class="container"> 
    <div class="box">1</div> 
    <div class="box">2</div> 
    <div class="box">3</div> 

    <a class="link" href="#">Link1</a> 
    <a class="link" href="#">Link1</a> 
    <a class="link" href="#">Link1</a> 
</div> 

et css:

* { 
    box-sizing: border-box; 
} 

body { 
    width: 100%; 
} 

.container { 
    width: 90%; 
    margin: 0 auto; 
} 

.box:first-child { 
    margin-left: 1%; 
} 

.box { 
    margin: 1% 1%; 
    width: 30.6666666667%; 
    background: red; 
    float: left; 
    height: 350px; 
} 

.box:last-child { 
    margin-right: 1%; 
} 

.link:first-child { 
    margin-left: 1%; 
} 

.link { 
    margin: 1% 1%; 
    width: 30.6666666667%; 
    background: red; 
    float: left; 
    text-align: center; 
} 

.link:last-child { 
    margin-right: 1%; 
}