단추가 아래쪽에 정렬되어야하는 서로 옆에있는 3 개의 응답하는 상자

Question

머리글, 이미지 및 아래쪽에 단추가있는 상자가 서로 나란히 있습니다. 마지막 상자는 이미지 아래에 텍스트가 있고 이미지의 높이가 처음 두 개보다 짧습니다. 나는 참고 용으로 코드 펜을 만들었다 : https://codepen.io/jessiemele/pen/aLmoYz. 화면 크기를 줄이면 이미지가 작아지면서 세 번째 상자의 단추가 움직이지만 다른 두 단추는 서로 나란히 놓이게됩니다. 세 번째 상자의 버튼을 다른 두 개의 인라인과 함께 유지하려면 어떻게해야합니까? 내 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> 

내 CSS : 이러한 요소 플렉스 사용이 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

:

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

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

(마지막 규칙에 맞 춥니 다 동등하게 높은 굴곡 컨테이너의 바닥에있는 .homeCTA) 당신은 단지이 일정 폭 이상이 필요한 경우

, 나는이 문제에 하나 개의 제안이

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

Answer 2

처럼 미디어 쿼리에 넣어,하지만 난 당신을 위해 괜찮 있는지 확실하지 않습니다. html의 구조를 변경합니다. 그래서 나는이 콘테이너에 이미지, 텍스트 및 버튼이 위치하고 다른 방법으로 버튼을 배치 한 코드에서 하나의 컨테이너에서 버튼을 추출합니다.

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

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