三个响应式盒子彼此相邻，底部需要对齐一个按钮

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：

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

您可以添加此CSS以在这些元素上使用FLEX：

.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的结构。因此，我从您的代码中的一个容器中提取按钮，其中此键盘中的图像，文本和按钮以其他方式放置按钮。这是示例您的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%;
}