如何实现一个三栏布局？

要求：左右固定，中间自适应。

弹性盒子

html

<div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>

css

.container {
  display: flex;
  gap: 16px;
}

.left {
  flex: 0 0 200px;
}

.center {
  flex: 1;
  min-width: 0;
}

.right {
  flex: 0 0 200px;
}

网格布局

html

<div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>

css

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 16px;
}

怎么选

• 布局关系简单、需要兼容一维排列时，优先用 flex。
• 明确就是三列结构时，grid-template-columns 表达更直接。
• 中间列存在长文本、代码块时，flex 方案里建议补 min-width: 0，避免内容把布局撑坏。

旧式实现

现代项目优先使用 Flexbox 或 Grid。以下方案主要用于理解和维护旧代码。

浮动

左右栏分别向两侧浮动，中间栏通过计算宽度占据剩余空间；父容器需要清除浮动。

.container::after {
  content: '';
  display: block;
  clear: both;
}

.left {
  float: left;
  width: 200px;
}

.right {
  float: right;
  width: 200px;
}

.center {
  float: left;
  width: calc(100% - 400px);
}

绝对定位

容器建立定位上下文，左右栏固定在两侧，中间栏同时设置 left 与 right。该方式下三栏都脱离文档流，容器需要自行确定高度。

.container {
  position: relative;
  min-height: 300px;
}

.left,
.right,
.center {
  position: absolute;
  top: 0;
  bottom: 0;
}

.left {
  left: 0;
  width: 200px;
}

.right {
  right: 0;
  width: 200px;
}

.center {
  left: 200px;
  right: 200px;
}

table 布局

display: table-cell 可以让单元格天然同行排列，但语义和响应式控制都较弱，通常只在维护历史代码时使用。

.container {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.left,
.center,
.right {
  display: table-cell;
}

.left,
.right {
  width: 200px;
}

圣杯布局与双飞翼布局

两者都是早期的浮动三栏方案：中间栏在 HTML 中优先出现，左右栏定宽，中间栏占满剩余空间。它们依靠负外边距把左右栏拉回同一行。

• 圣杯布局：容器通过左右 padding 预留侧栏空间，再用相对定位调整侧栏位置。
• 双飞翼布局：给中间栏增加内层元素，并通过内层的左右 margin 预留侧栏空间；外层容器不需要预留 padding。

这两种方案实现复杂、对最小宽度和清除浮动有额外要求。除非需要兼容或维护既有实现，否则使用 Flexbox 或 Grid 更合适。