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：

@media print {
  #mainMenuDiv {
    display: none;
    visibility: hidden;
  }
}

@media

（最后一条规则对齐同等高度的Flex容器底部的.trio { display: flex; } .trio > * { display: flex; flex-direction: column; } .trio > * .homeCTA { margin-top: auto; }）

如果您只需要超过一定宽度，请将其放入媒体查询，例如

.homeCTA

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

三个响应框彼此相邻，其中按钮需要在底部对齐

2 个答案: