通过为卡片及其内容区域启用 Flexbox 布局并设置 justify-content: space-between，可强制按钮始终锚定在卡片底部，无论标题和正文长度如何变化。

通过为卡片及其内容区域启用 flexbox 布局并设置 `justify-content: space-between`，可强制按钮始终锚定在卡片底部，无论标题和正文长度如何变化。

要实现多张卡片中「按钮统一到底部对齐」的效果（如示意图所示），关键在于控制卡片内部的垂直空间分布，而非单纯依赖 margin-top 或固定高度。原始代码中 .btn 仅靠 margin-top: 16px 定位，导致按钮随内容高度浮动；而目标效果要求所有卡片高度一致，且按钮始终位于卡片内容区底部。

✅ 解决方案核心思路

1. 卡片整体设为 flex column 容器：使 .card 沿纵轴排列子元素（图片 + 内容区），并拉伸占满可用空间；
2. .card-content 设为 flex column 且 justify-content: space-between：将标题/段落内容与按钮分别“推”至顶部和底部；
3. 包裹文字内容（

   和

   ）于一个

   中：避免按钮被直接置于 .card-content 的 flex 主轴末端前，干扰布局逻辑；
4. 确保 .card-content 高度撑满父容器：添加 height: 100%（配合 flex: 1 更稳健，见下文优化建议）。

✅ 优化后的 CSS 关键片段

.card {
  display: flex;
  flex-direction: column;
  width: 325px;
  background-color: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin: 20px;
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 核心：两端对齐 */
  padding: 16px;
  flex: 1; /* 替代 height: 100%，更健壮（推荐） */
}

✅ HTML 结构微调（必需）

需将标题与段落包裹在独立容器中（如

），确保按钮作为 .card-content 的最后一个 flex 项目：

<div class="card-content">
  <div class="content-text"> <!-- 包裹文本内容 -->
    <h3>This is title of card 1</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <a href="#" class="btn">Read More</a>
</div>

⚠️ 注意事项

• 移除 .btn 的 margin-top：Flex 布局已接管垂直定位，保留会导致额外间距干扰；
• 图片无需额外处理： 保持块级默认行为，自然占据自身高度；
• 响应式兼容性：该方案在现代浏览器（Chrome/Firefox/Safari/Edge ≥ v12）中完全支持，无需 Polyfill；
• 进阶优化建议：若卡片高度需严格一致（含图片差异），可为 img 设置 min-height 或 object-fit: cover，但本例中图片尺寸一致，非必需。

✅ 总结

此方案以语义清晰、零 JavaScript、纯 CSS 的方式，利用 Flexbox 的 space-between 特性实现了「内容自适应 + 按钮底部锚定」的视觉一致性。它不仅解决了当前问题，还具备良好的可维护性和扩展性——后续增加图标、评分组件等，只需按 flex 项目顺序插入即可自动对齐。