卡片高度不一致主因是内容长度差异，解决方法是用flex:column布局+flex:1撑满描述区并配合多行截断。
卡片高度不一致是因为内容长度不同，不是 CSS 写错了
初学者常以为是 height 没设对，或 flex 用错了。实际多数情况是：标题行数不同、描述文字长短不一、图片尺寸未约束，导致每个卡片的 content 区域自然高度差异大。CSS 层面强行设固定 height 会截断文字或撑开容器，反而更难看。
用 display: flex + flex-direction: column 控制内部结构流
让卡片内部元素按列排列，并把可变内容区域（如描述文字）用 flex: 1 占满剩余空间，就能拉齐底部对齐线。关键点在于：
- 卡片容器必须设
display: flex和flex-direction: column - 标题、图片等固定高度部分不设
flex，保持自然尺寸 - 描述文字容器加
flex: 1，它会自动撑开填满剩余空间，再配合overflow: hidden和text-overflow: ellipsis防止溢出 - 避免给卡片整体设
height，否则破坏弹性
.card {
display: flex;
flex-direction: column;
border: 1px solid #eee;
border-radius: 8px;
}
.card img {
width: 100%;
height: 120px;
object-fit: cover;
}
.card h3 {
margin: 0.75rem 0 0.5rem;
font-size: 1.1rem;
}
.card .desc {
flex: 1;
padding: 0 1rem 1rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
图片尺寸不统一？直接用 object-fit: cover 裁剪
不同卡片配图宽高比不同，光靠 width: 100% 会导致高度参差。不建议用 JS 计算或后端统一裁图——初级项目里，object-fit: cover 是最轻量可靠的解法：
-
object-fit: cover保持图片比例并填满容器，多余部分裁掉 - 必须同时设
width和height（哪怕只是固定值），否则cover不生效 - 避免用
background-image模拟图片——语义错误，且不利于 SEO 和可访问性
文字截断要兼容多行，别只靠 white-space: nowrap
white-space: nowrap + text-overflow: ellipsis 只对单行有效，卡片描述通常需显示 2–3 行。必须用基于 -webkit-box 的多行截断方案，并注意：
立即学习“前端免费学习笔记（深入）”；
- 必须有
display: -webkit-box，仅line-clamp不起作用 -
-webkit-line-clamp是非标准属性，但所有现代浏览器（含 Safari）都支持，初级项目可放心用 - 如果文字太短，不会强制撑到 3 行；如果太长，会在第 3 行末尾加省略号
- 不要给
.desc设height，否则和flex: 1冲突
真正卡住人的往往不是某个属性不会写，而是没意识到：卡片高度一致的本质，是让「可变内容」在视觉上被约束，而不是让整个卡片变成刚性盒子。结构越清晰，样式越容易收敛。
