等高列首选 display: flex 或 display: grid；flex 依赖 align-items: stretch 和父容器明确高度，grid 适合固定列数布局；应避免 float、table-cell 等语义错误或兼容性差的旧方案。
等高列在 HTML5 布局中早已不是“难题”，而是有明确、稳定、语义清晰的解法——display: flex 和 display: grid 是当前首选，float 或 table-cell 等老方案应避免在新项目中使用。
用 flex 实现等高列（最常用）
父容器设为 display: flex 后，所有子项默认拉伸至容器高度，天然等高。无需额外 hack，兼容性覆盖所有现代浏览器（Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+）。
注意点：
- 父容器需有明确高度（如
min-height或内容撑开），否则子项高度由内容决定，“等高”无从体现 - 子项默认行为是
align-items: stretch，不要手动覆盖它 - 若某列需固定高度或不参与拉伸，加
align-self: flex-start
<div class="container">
<div class="col">内容短</div>
<div class="col">内容很长……</div>
<div class="col">中等长度</div>
</div>
<p><style>
.container {
display: flex;
min-height: 300px; /<em> 关键：提供参考高度 </em>/
}
.col {
flex: 1; /<em> 等宽分配，可按需调整 </em>/
padding: 1rem;
border: 1px solid #ccc;
}
</style>用 grid 实现等高列（结构更可控）
当列数固定、或需响应式断点重排时，display: grid 更直观。设置 grid-template-rows: 1fr 即可让所有行轨道等高；而列高一致本质是“每列在同一行轨道内”，所以只要不显式定义多行，列自然等高。
立即学习“前端免费学习笔记（深入）”；
典型适用场景：
- 三栏布局，中间主内容 + 左右侧边栏
- 卡片网格中每行卡片需顶部对齐且高度一致
- 需要
gap控制间距，而非依赖 margin/padding
<div class="grid-container">
<aside class="sidebar">侧边栏</aside>
<main class="main">主内容很长……</main>
<aside class="sidebar">另一侧边栏</aside>
</div>
<p><style>
.grid-container {
display: grid;
grid-template-columns: 200px 1fr 200px;
min-height: 400px;
}
.sidebar, .main {
padding: 1rem;
border: 1px solid #ddd;
}
</style>为什么不用 float 或 display: table-cell？
这两种方式在历史上曾被用于模拟等高，但存在本质缺陷：
-
float：脱离文档流，父容器高度塌陷，必须用clear或overflow: hidden补救，且无法真正“等高”，只是视觉错觉 -
table-cell：语义错误（表格布局 ≠ 内容布局），vertical-align行为难以预测，响应式下几乎不可控 - 两者均不支持
gap、justify-content等现代对齐控制，维护成本高
如果你在遗留代码里看到 height: 100% 配合 position: absolute 拉伸，那属于已淘汰的“负 margin + overflow hidden” hack 变体，稳定性差，调试困难。
响应式下等高列容易被忽略的细节
Flex/Grid 在移动端堆叠时（如 flex-direction: column 或 grid-template-columns: 1fr），“等高”会失效——因为此时列已变为垂直排列，不再共享同一行上下文。此时是否需要等高，取决于设计意图：
- 如果堆叠后仍需视觉统一（如卡片列表），应改用
min-height+height: auto控制最小高度，而非强求等高 - 若必须等高，需用 JS 监听 resize 并同步高度（不推荐，破坏 CSS 主导原则）
- Grid 中可用
grid-auto-rows: minmax(200px, auto)设定最小行高，比 JS 更轻量
真正的难点不在“怎么实现等高”，而在于判断“是否该等高”——内容长度差异大时，强制等高反而损害可读性与信息密度。优先让内容自然呼吸，再用 CSS 约束边界。
