通过 Flexbox 的 column 布局与 justify-content: space-between，可强制卡片内容区域高度撑满、标题与段落占据上部空间、按钮始终锚定在底部，从而实现多卡片中按钮视觉位置完全一致。
通过 flexbox 的 column 布局与 `justify-content: space-between`，可强制卡片内容区域高度撑满、标题与段落占据上部空间、按钮始终锚定在底部，从而实现多卡片中按钮视觉位置完全一致。
在响应式卡片布局中，当卡片内文本长度不一（如标题长短不同、段落行数各异）时，按钮容易因内容高度差异而错位——这会严重破坏视觉一致性与专业感。解决该问题的核心思路不是限制内容，而是控制容器的布局行为：让每张卡片成为一个垂直弹性容器，其内容区域（.card-content）在固定高度下自动分配空间，将按钮“推”到底部。
✅ 关键 CSS 改动说明
-
卡片整体设为 Flex Column 容器
.card { display: flex; flex-direction: column; /* 垂直主轴 */ } -
内容区启用弹性布局并撑满高度
.card-content { display: flex; flex-direction: column; justify-content: space-between; /* 两端对齐：标题/段落 → 上，按钮 → 下 */ height: 100%; /* 必须显式设置高度，否则无法计算剩余空间 */ padding: 16px; } -
包裹文字内容（标题+段落）以避免干扰按钮定位
答案中新增了 <div> 包裹 h3 和 p，确保它们作为一个整体参与 space-between 分配，而非与按钮平级竞争空间：<div class="card-content"> <div> <!-- 关键包裹层 --> <h3>...</h3> <p>...</p> </div> <a href="#" class="btn">Read More</a> </div> -
补充全局对齐保障（可选但推荐）
在 .card-container 中添加 align-items: stretch，确保所有卡片高度自动拉齐（尤其在多行布局中）：.card-container { align-items: stretch; /* 防止因内容高度差异导致卡片高度不一 */ }
? 完整可运行示例（精简版）
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; 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;
align-items: stretch;
}
.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 img { width: 100%; height: auto; }
.card-content {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
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;
color: #fff;
text-decoration: none;
border-radius: 4px;
margin-top: 0; /* 移除原 margin-top，由 flex 控制位置 */
}
</style>
</head>
<body>
<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">
<div>
<h3>This is title of card 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<a href="#" class="btn">Read More</a>
</div>
</div>
<!-- 其他两张卡片结构同上 -->
</div>
</body>
</html>⚠️ 注意事项
- 高度依赖 height: 100%：.card-content 必须有明确高度上下文（父元素 .card 是 flex container 且无固定高度时，100% 仍有效），否则 justify-content: space-between 无法生效。
- 避免 margin-top 干扰：原 .btn 的 margin-top: 16px 会破坏 flex 布局逻辑，应移除，交由 space-between 统一控制间距。
- 图片高度建议约束：若需严格控制卡片总高度，可为 img 添加 max-height 或使用 object-fit: cover 配合固定宽高比容器。
- 兼容性：Flexbox 在现代浏览器中支持良好（IE10+ 需加 -ms- 前缀，但建议忽略旧版或使用 Autoprefixer）。
此方案无需 JavaScript、不依赖 JS 计算高度，纯 CSS 实现语义清晰、性能优异，是卡片式布局中「底部对齐按钮」的标准实践。
