如何仅用CSS实现按钮在Div底部对齐且保持Div顶部对齐

作为前端新手，我编写了如下代码，目前正面临布局难题：希望无论Div内上方文本长度如何，按钮始终在Div底部对齐，同时保持各个Div顶部对齐（参考类似knownhost官网的卡片布局）。现有代码如下：

原CSS代码 #

.div1{width:90%;height:100%;max-width:1920px;margin:2.5em auto}
.div2{vertical-align:top;width:32%;margin:0 0 2em .5%;display:inline-block}
.image {background-color:#0d0d0d}
.image1{float:left;width:100%;border:1px solid #d7d7d7;margin-bottom: .8em}
.title{color:#55068f;font:20px robotoregular;text-align:center;padding:3em 0 0}
.text{width:85%;margin:1em auto 0;text-align:center;padding-bottom:34px;font:16px robotolight;height:auto;color:#313030;line-height:1.4em}
.button a,.button a:hover{text-decoration:none;margin:0 auto}
.button a{font:19px robotolight;color:#55068f;text-align:center;border:thin solid #55068f;padding:.8em 2em;width:40%}
.button a:hover{color:#0d0d0d;border:thin solid #FFD83A;background-color:#FFD83A}
.button{text-align:center;}

原HTML代码 #

<div class="div1">
    <div class="div2">
        <div class="image"><a href=""><img src="" class="image1" alt=""></a></div>
        <div class=content>
        <div class=title>Title</div>
        <div class=text><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
        </div>
        <div class=button><a href="" class=custom_btn>find out more</a></div>
    </div>
    
    <div class="div2">
        <div class="image"><a href=""><img src="" class="image1" alt=""></a></div>
        <div class=content>
        <div class=title>Title</div>
        <div class=text><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</div>
        </div>
        <div class=button><a href="" class=custom_btn>find out more</a></div>
    </div>
        
    <div class="div2">
        <div class="image"><a href=""><img src="" class="image1" alt=""></a></div>
        <div class=content>
        <div class=title>Title</div>
        <div class=text><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
        </div>
        <div class=button><a href="" class=custom_btn>find out more</a></div>
    </div>
</div>

Flexbox是实现这类布局最简洁高效的方案，能完美解决文本长度不一致导致的按钮错位问题，具体修改如下：

修改后的CSS代码 #

.div1{
  width:90%;
  max-width:1920px;
  margin:2.5em auto;
  display: flex; /* 父容器设为flex，子卡片横向排列 */
  gap: 0.5%; /* 替代margin统一管理子项间距 */
  flex-wrap: wrap; /* 屏幕缩小时自动换行 */
}
.div2{
  width:32%;
  margin-bottom: 2em;
  display: flex; /* 子卡片设为垂直方向的flex布局 */
  flex-direction: column;
  vertical-align: top;
}
.image {
  background-color:#0d0d0d;
}
.image1{
  width:100%;
  border:1px solid #d7d7d7;
  margin-bottom: .8em;
}
.title{
  color:#55068f;
  font:20px robotoregular;
  text-align:center;
  padding:3em 0 0;
}
.text{
  width:85%;
  margin:1em auto 0;
  text-align:center;
  padding-bottom:34px;
  font:16px robotolight;
  color:#313030;
  line-height:1.4em;
  flex-grow: 1; /* 让文本区域自动填充剩余空间，把按钮挤到底部 */
}
.button a,.button a:hover{
  text-decoration:none;
  margin:0 auto;
}
.button a{
  font:19px robotolight;
  color:#55068f;
  text-align:center;
  border:thin solid #55068f;
  padding:.8em 2em;
  width:40%;
  display: block; /* 确保a标签能生效宽度设置 */
}
.button a:hover{
  color:#0d0d0d;
  border:thin solid #FFD83A;
  background-color:#FFD83A;
}
.button{
  text-align:center;
  /* 可选：也可以用margin-top: auto替代.text的flex-grow，效果一致 */
}

修改后的HTML代码（补全规范属性） #

<div class="div1">
    <div class="div2">
        <div class="image"><a href=""><img src="" class="image1" alt=""></a></div>
        <div class="content">
            <div class="title">Title</div>
            <div class="text"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>
        </div>
        <div class="button"><a href="" class="custom_btn">find out more</a></div>
    </div>
    
    <div class="div2">
        <div class="image"><a href=""><img src="" class="image1" alt=""></a></div>
        <div class="content">
            <div class="title">Title</div>
            <div class="text"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</p></div>
        </div>
        <div class="button"><a href="" class="custom_btn">find out more</a></div>
    </div>
        
    <div class="div2">
        <div class="image"><a href=""><img src="" class="image1" alt=""></a></div>
        <div class="content">
            <div class="title">Title</div>
            <div class="text"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>
        </div>
        <div class="button"><a href="" class="custom_btn">find out more</a></div>
    </div>
</div>

关键修改说明 #

1. 父容器.div1：设置display: flex让子卡片横向排列，flex-wrap: wrap保证响应式适配
2. 子卡片.div2：设置flex-direction: column让内部元素垂直分布，自动继承父容器的等高特性
3. 文本区域.text：添加flex-grow: 1，自动填充卡片内的剩余空间，强制按钮定位到底部
4. 细节优化：去掉不必要的float属性，补全HTML中class属性的引号，用gap统一管理子项间距

内容的提问来源于stack exchange，提问作者vld1