如何让卡片内按钮始终对齐底部（统一高度布局）-html教程-PHP中文网

如何让卡片内按钮始终对齐底部（统一高度布局）

通过 flexbox 的 flex-direction: column 与 justify-content: space-between，配合结构优化，可强制卡片内容区域高度占满、标题/段落自上而下排列、按钮固定在底部，实现多卡片中按钮视觉对齐。

通过 flexbox 的 flex-direction: column 与 justify-content: space-between，配合结构优化，可强制卡片内容区域高度占满、标题/段落自上而下排列、按钮固定在底部，实现多卡片中按钮视觉对齐。

在响应式卡片布局中，当卡片标题长度不一、正文段落行数差异较大时，按钮（如“Read More”）会因内容高度不同而上下浮动，破坏整体视觉一致性。解决这一问题的关键不是限制文本长度，而是利用 CSS Flexbox 实现内容区域的弹性高度分配。

核心思路是：将 .card 设为垂直方向的 Flex 容器，并让其子元素（图片 + 内容区）自然流式排列；再将 .card-content 本身设为 display: flex; flex-direction: column，并设置 justify-content: space-between —— 这样，内部的

（包裹标题和段落）会被推至顶部，而 .btn 则被自动推至底部，无论中间内容多高或多矮。

此外，需注意三点关键修改：

在 .card-container 中添加 align-items: stretch，确保所有卡片高度一致（默认为 stretch，但显式声明更清晰）；
给 .card 添加 display: flex; flex-direction: column，使其子元素（图片和 .card-content）按列堆叠；
将 .card-content 的 height: 100% 与 justify-content: space-between 配合，使内部空间被主动分配。

以下是优化后的关键 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;
  height: 100%; /* 必须设为 100%，才能参与父容器的高度分配 */
}

同时，HTML 结构需微调：将标题

现代商业数字化服务公司网站模板

现代商业数字化服务公司网站模板是一款提供数字营销、品牌包装、内容创作和网页设计等数字化商业服务公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

和正文

包裹在一个

内（作为第一项），按钮作为第二项——这样 space-between 才能准确识别“首尾”元素：

<div class="card-content">
  <div> <!-- 内容区块：标题 + 段落 -->
    <h3>This is title of card 1</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <a href="#" class="btn">Read More</a> <!-- 自动锚定到底部 -->
</div>

⚠️ 注意事项：

避免给 .card-content 设置固定高度（如 height: 300px），否则会破坏响应性；
若卡片中存在动态加载内容（如异步渲染的富文本），建议配合 min-height 预留基础空间；
在移动端小屏下，建议配合媒体查询将 .card-container 改为 flex-direction: column，并移除 align-items: stretch 防止过宽拉伸。

此方案兼容所有现代浏览器（Chrome 29+、Firefox 28+、Safari 9+、Edge 12+），无需 JavaScript，语义清晰，维护成本低，是卡片式布局中实现底部按钮对齐的推荐实践。