如何使不同文本长度卡片中的按钮处于同一高度？

需求：所有卡片的「Read More」按钮需位于卡片底部，即使卡片内标题、正文文本长度不同，按钮也保持水平同一位置。

原代码 #

CSS #

* {margin: 0px;padding: 0px;box-sizing: border-box;font-family: sans-serif;}
body {background-color: #f0f0f0;}
.card-container {display: flex;justify-content: center;flex-wrap: wrap;margin-top: 100px;}
.card {width: 325px;background-color: #f0f0f0;border-radius: 8px;overflow: hidden;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);margin: 20px;}
.card img {width: 100%;height: auto;}
.card-content {padding: 16px;}
.card-content h3 {font-size: 28px;margin-bottom: 8px;}
.card-content p {color: #666;font-size: 15px;line-height: 1.3;}
.card-content .btn {display: inline-block;padding: 8px 16px;background-color: #333;text-decoration: none;border-radius: 4px;margin-top: 16px;color: #fff;}

HTML #

<div class="card-container">
  <div class="card">
    <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
    <div class="card-content">
      <h3>This is title of card 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra maecenas accumsan lacus vel facilisis volutpat. Aliquam etiam erat velit scelerisque in dictum non consectetur. urus inmassa tempor nec feugiat nisl pretium fusce id.</p>
      <a href="" class="btn">Read More</a>
    </div>
  </div>
  <div class="card">
    <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
    <div class="card-content">
      <h3>This is title of cards 2 and it is longer</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <a href="" class="btn">Read More</a>
    </div>
  </div>
  <div class="card">
    <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
    <div class="card-content">
      <h3>This is title of card 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat pellentesque adipiscing commodo elit at imperdiet dui.</p>
      <a href="" class="btn">Read More</a>
    </div>
  </div>
</div>

解决方案 #

利用Flex布局的弹性特性，让卡片内容区域自动填充剩余空间，将按钮推至底部：

1. 给.card设置垂直Flex布局，使内部元素按垂直方向排列
2. 给.card-content设置flex:1，让它占据卡片除图片外的所有剩余空间
3. 给按钮设置margin-top:auto，自动填充上方剩余空间，从而固定在底部

修改后的完整代码 #

CSS

* {margin: 0px;padding: 0px;box-sizing: border-box;font-family: sans-serif;}
body {background-color: #f0f0f0;}
.card-container {display: flex;justify-content: center;flex-wrap: wrap;margin-top: 100px;}
/* 给卡片设置垂直flex布局 */
.card {width: 325px;background-color: #f0f0f0;border-radius: 8px;overflow: hidden;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);margin: 20px;display: flex;flex-direction: column;}
.card img {width: 100%;height: auto;}
/* 让内容区域填充剩余空间 */
.card-content {padding: 16px;flex: 1;display: flex;flex-direction: column;}
.card-content h3 {font-size: 28px;margin-bottom: 8px;}
.card-content p {color: #666;font-size: 15px;line-height: 1.3;}
/* 按钮自动对齐到底部 */
.card-content .btn {display: inline-block;padding: 8px 16px;background-color: #333;text-decoration: none;border-radius: 4px;margin-top: auto;color: #fff;}

HTML（无需修改）

<div class="card-container">
  <div class="card">
    <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
    <div class="card-content">
      <h3>This is title of card 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra maecenas accumsan lacus vel facilisis volutpat. Aliquam etiam erat velit scelerisque in dictum non consectetur. urus inmassa tempor nec feugiat nisl pretium fusce id.</p>
      <a href="" class="btn">Read More</a>
    </div>
  </div>
  <div class="card">
    <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
    <div class="card-content">
      <h3>This is title of cards 2 and it is longer</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <a href="" class="btn">Read More</a>
    </div>
  </div>
  <div class="card">
    <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
    <div class="card-content">
      <h3>This is title of card 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat pellentesque adipiscing commodo elit at imperdiet dui.</p>
      <a href="" class="btn">Read More</a>
    </div>
  </div>
</div>

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