通过为卡片及其内容区域启用 Flexbox 布局并设置 justify-content: space-between，可强制按钮始终锚定在卡片底部，无论标题和正文长度如何变化。
通过为卡片及其内容区域启用 flexbox 布局并设置 `justify-content: space-between`，可强制按钮始终锚定在卡片底部，无论标题和正文长度如何变化。
要实现多张卡片中「按钮统一到底部对齐」的效果（如示意图所示），关键在于控制卡片内部的垂直空间分布，而非单纯依赖 margin-top 或固定高度。原始代码中 .btn 仅靠 margin-top: 16px 定位，导致按钮随内容高度浮动；而目标效果要求所有卡片高度一致，且按钮始终位于卡片内容区底部。
✅ 解决方案核心思路
- 卡片整体设为 flex column 容器：使 .card 沿纵轴排列子元素（图片 + 内容区），并拉伸占满可用空间；
- .card-content 设为 flex column 且 justify-content: space-between：将标题/段落内容与按钮分别“推”至顶部和底部；
- 包裹文字内容（
和
）于一个
中：避免按钮被直接置于 .card-content 的 flex 主轴末端前，干扰布局逻辑；- 确保 .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 项目顺序插入即可自动对齐。
