如何用HTML实现三栏等高布局，打造经典网页布局教程？

本文共计1126个文字，预计阅读时间需要5分钟。

现代三列等高布局，直接使用 `display: flex` 或 `display: grid`，避免使用 `float`、`table-cell` 或负 margin 套路。这些方案可能导致语义错误，且在响应式或内容变化时，高度可能不一致。

flex 实现三栏等高：父容器设 display: flex 就够了

Flex 的交叉轴默认是 align-items: stretch，只要子项没写 height、min-height 或 align-self: flex-start，它们就会自动拉伸到父容器最大高度。

• 父容器必须是直接包含三栏的元素，且不能有高度限制（如 height: 200px）干扰拉伸
• 左右栏可固定宽度：width: 200px 或更稳妥的 flex: 0 0 200px
• 中间栏用 flex: 1，不是 flex: 1 1 auto——后者在内容撑大时可能缩放，破坏等高
• 如果某栏要“不参与等高”，比如侧边栏只按内容高度显示，加 align-self: flex-start

.container { display: flex; gap: 12px; } .left, .right { flex: 0 0 200px; } .center { flex: 1; }

grid 实现三栏等高：grid-template-columns + 默认行行为

Grid 下，同一行内的所有网格项天然等高，因为行高由该行最高项决定。