本文介绍一种基于 flexbox 的纯 css 解决方案，通过合理设置容器高度、弹性布局方向与自动外边距，实现跨卡片的标题自适应、描述居中、按钮始终锚定底部的视觉一致性。无需修改 html 结构，兼容 swiper 等轮播组件。
本文介绍一种基于 flexbox 的纯 css 解决方案，通过合理设置容器高度、弹性布局方向与自动外边距，实现跨卡片的标题自适应、描述居中、按钮始终锚定底部的视觉一致性。无需修改 html 结构，兼容 swiper 等轮播组件。
在构建响应式卡片式布局（如 Swiper 轮播图）时，一个常见痛点是：当卡片内标题长度不一，导致 .info 区域高度参差，进而使按钮位置上下浮动，破坏整体视觉节奏。问题根源在于默认文档流下各卡片高度由内容决定，缺乏统一基准线。
核心思路是为每张卡片建立独立的弹性容器，并强制其子元素沿纵轴（column）分布，再利用 margin-top: auto 将按钮“推”至底部——这是 Flexbox 中实现“底部锚定”的标准模式。
以下为推荐的 CSS 实现（适配您原始 HTML 结构，无需新增 wrapper 或修改 DOM）：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
/* 确保轮播容器具备明确高度上下文 */
.swiper-container {
height: 100vh; /* 或根据实际需求设定最小高度 */
}
/* 关键：使每张卡片成为独立 flex 容器，纵向堆叠 */
.box {
display: flex;
flex-direction: column;
height: 100%; /* 占满父容器高度，为内部 flex 提供基准 */
}
/* info 区域设为 flex 容器，占据剩余空间 */
.info {
display: flex;
flex-direction: column;
flex: 1; /* 等价于 flex: 1 0 auto，自动填充可用空间 */
min-height: 0; /* 防止内容收缩时 flex 失效（尤其含图片时） */
}
/* 标题与描述保持自然流式布局，按钮强制沉底 */
.info .title,
.info p:not(.btn > a) {
margin: 0;
}
.btn {
margin-top: auto; /* 关键！将按钮推至 .info 底部 */
text-align: center;
}
.btn a {
display: inline-block;
padding: 10px 20px;
background-color: #00bcd4; /* 替换为您主题色 */
border-radius: 20px;
text-decoration: none;
color: white;
}
⚠️ 重要注意事项：
- 必须为 .box 设置明确高度（如 height: 100%），否则 .info 的 flex: 1 无法生效；
- 若卡片内含图片，请确保其 max-width: 100% 且 height: auto，避免撑破布局；
- 在 Swiper 中，建议配合 slidesPerView: 'auto' 和 spaceBetween 使用，并为 .swiper-slide 添加 height: 100%；
- 如遇 Safari 兼容性问题，可添加 -webkit-box-flex: 1 到 .info；
- 不推荐直接给 .swiper-wrapper 设置 align-items: end（如原答案所示），这会导致所有卡片整体下沉，而非单卡内按钮对齐。
最终效果：无论标题是 “AI Overview” 还是 “A Comprehensive Introduction to Artificial Intelligence and Its Real-World Applications”，所有卡片的按钮都将严格对齐于同一水平线，描述文本在标题与按钮之间自然居中，视觉层次清晰稳定。
