卡片内部标题和简介排版不齐的根本解法是设.card为flex容器并用flex-direction: column+flex-grow: 1吸满空间，配合.card-footer{margin-top: auto}贴底，禁用固定height和position: absolute。
卡片里标题和简介排版不齐、换行错乱、高度不一致——根本不是文字本身的问题，而是容器没约束好内容流。用 flex-direction: column + flex-grow 是最稳的解法，别碰 position: absolute 或固定 height。
卡片内部怎么让标题和简介垂直对齐又不撑高
常见错误是给 .card 设死高度，或用 margin-top: auto 乱推按钮，结果简介短时留大片空白，长时又溢出。真正可控的方式是把卡片设为 flex 容器，并让主体区域吸满空间：
.card { display: flex; flex-direction: column; height: 100%; }-
.card-content { flex-grow: 1; }—— 这个包裹标题和简介的容器必须占满剩余空间 -
.card-footer { margin-top: auto; }—— 按钮自然贴底，不依赖内容长度 - 绝对不要给
.card写height: 300px，它会破坏 Grid/Flex 的自动计算逻辑
标题和简介文字超长时怎么安全截断
用 text-overflow: ellipsis 必须配合固定高度和 white-space: nowrap，只适用于单行标题；简介多行就得换方案。现代浏览器支持更可靠的截断方式：
- 标题单行：直接用
text-overflow: ellipsis，但需确保父容器overflow: hidden且width可控 - 简介两行：用
display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden;，兼容性好，不依赖 JS - 禁用
max-height+overflow: hidden组合——它会在字体渲染差异下突然截掉半行字 - 别在
h3或p上直接加截断样式，统一包一层.card-title/.card-desc再设
为什么标题总被图片顶偏、简介和按钮错位
根源常出在图片没约束：未设 object-fit: cover 或没包 overflow: hidden 容器，导致图片原始比例拉伸整个卡片。另外，vertical-align 在 inline-block 场景下容易误用。
立即学习“前端免费学习笔记（深入）”；
- 图片外层必须加
overflow: hidden容器（比如.card-img-wrapper），再设img { width: 100%; height: 100%; object-fit: cover; } - 禁止给
img直接加border-radius—— 它只裁剪边框，不裁剪图片内容，视觉上仍是直角 - 如果用
inline-block排卡片（非推荐），必须统一设vertical-align: top，否则基线对齐会让高度参差 - 所有文字元素（
h3,p）默认margin-top/bottom会干扰 flex 布局，建议重置：h3, p { margin: 0; }
真正难的不是让三张卡片排成一行，而是让它们在 iOS Safari、Chrome Android、旧版 Edge 下都保持等高、文字不跳、按钮不悬空——这些细节全藏在 flex 子项的 align-self、图片的 aspect-ratio fallback 和截断样式的作用域里。
