Drei reaktionsfähige Kästen nebeneinander, wo unten ein Knopf ausgerichtet werden muss

Question

Ich habe drei Kästchen nebeneinander, die eine Überschrift, ein Bild und eine Schaltfläche auf der Unterseite enthalten. Die letzte Box hat Text unter dem Bild und das Bild ist in der Höhe kürzer als die ersten beiden. Ich machte einen Code-Stift als Referenz: https://codepen.io/jessiemele/pen/aLmoYz. Sie können sehen, wenn Sie den Bildschirm verkleinern, wenn das Bild kleiner wird, bewegt sich der Knopf auf der dritten Box mit ihm, aber die anderen beiden bleiben in einer Linie. Wie kann ich diesen Knopf auf der dritten Box bekommen, um mit den anderen beiden in einer Linie zu bleiben? mein 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> 

mein 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

Sie diese CSS hinzufügen können auf diese Elemente flex zu verwenden:

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

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

(Die letzte Regel ausrichtet die .homeCTA an der Unterseite der gleich hohen Flex-Container)

Wenn Sie nur diese über eine bestimmte Breite, steckte es in eine Medienabfrage, wie

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

Answer 2

Ich habe einen Vorschlag in diesem Problem, aber ich bin nicht sicher, ob es für Sie in Ordnung ist. Ich ändere eine Struktur eines HTML. Also extrahiere ich Buttons aus einem Container in Ihrem Code, wo sich in diesem Container Bilder, Texte und Buttons befinden und Buttons auf andere Weise platziert werden. Hier ist Beispiel Ihre html so etwas wie dies sein sollte:

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

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