项目中常见布局方式

1. 三栏布局

三栏布局通常指左右两栏固定宽度，中间栏自适应宽度的布局。

方法一：Flexbox 实现

html

<div class="container">
  <div class="left">左侧栏</div>
  <div class="center">中间内容</div>
  <div class="right">右侧栏</div>
</div>

css

.container {
  display: flex;
  min-height: 200px;
}

.left {
  width: 200px;
  background-color: #f0f0f0;
}

.center {
  flex: 1;
  background-color: #e0e0e0;
}

.right {
  width: 200px;
  background-color: #f0f0f0;
}

方法二：Grid 实现

css

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  min-height: 200px;
}

.left {
  background-color: #f0f0f0;
}

.center {
  background-color: #e0e0e0;
}

.right {
  background-color: #f0f0f0;
}

方法三：浮动实现

css

.container {
  overflow: hidden; /* 清除浮动 */
}

.left {
  float: left;
  width: 200px;
  background-color: #f0f0f0;
}

.right {
  float: right;
  width: 200px;
  background-color: #f0f0f0;
}

.center {
  margin: 0 200px;
  background-color: #e0e0e0;
}

2. 圣杯布局

圣杯布局是一种特殊的三栏布局，特点是：

• 中间栏优先渲染（HTML结构中放在前面）
• 三栏等高
• 中间栏自适应宽度

实现方案：

html

<div class="container">
  <div class="center">中间内容</div>
  <div class="left">左侧栏</div>
  <div class="right">右侧栏</div>
</div>

css

.container {
  padding: 0 200px; /* 为左右栏预留空间 */
  min-height: 200px;
  overflow: hidden; /* 清除浮动 */
}

.center {
  float: left;
  width: 100%;
  background-color: #e0e0e0;
}

.left {
  float: left;
  width: 200px;
  margin-left: -100%; /* 移动到上一行的最左侧 */
  position: relative;
  left: -200px; /* 再向左移动自身宽度 */
  background-color: #f0f0f0;
}

.right {
  float: left;
  width: 200px;
  margin-left: -200px; /* 直接移动到右侧预留位置 */
  position: relative;
  right: -200px; /* 再向右移动自身宽度 */
  background-color: #f0f0f0;
}

现代实现（使用 Flexbox）

html

<div class="holy-grail">
  <div class="center">中间内容</div>
  <div class="left">左侧栏</div>
  <div class="right">右侧栏</div>
</div>

css

.holy-grail {
  display: flex;
  min-height: 200px;
}

.center {
  flex: 1;
  order: 2; /* 中间栏在视觉上的顺序 */
  background-color: #e0e0e0;
}

.left {
  width: 200px;
  order: 1; /* 左侧栏在视觉上的顺序 */
  background-color: #f0f0f0;
}

.right {
  width: 200px;
  order: 3; /* 右侧栏在视觉上的顺序 */
  background-color: #f0f0f0;
}

现代实现（使用 Grid）

css

.holy-grail {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-areas: "left center right";
  min-height: 200px;
}

.center {
  grid-area: center;
  background-color: #e0e0e0;
}

.left {
  grid-area: left;
  background-color: #f0f0f0;
}

.right {
  grid-area: right;
  background-color: #f0f0f0;
}

3. 双飞翼布局

双飞翼布局是圣杯布局的另一种实现，解决了一些兼容性问题：

html

<div class="container">
  <div class="center">
    <div class="center-content">中间内容</div>
  </div>
  <div class="left">左侧栏</div>
  <div class="right">右侧栏</div>
</div>

css

.container {
  min-height: 200px;
  overflow: hidden;
}

.center {
  float: left;
  width: 100%;
  background-color: #e0e0e0;
}

.center-content {
  margin: 0 200px; /* 为左右栏预留空间 */
}

.left {
  float: left;
  width: 200px;
  margin-left: -100%;
  background-color: #f0f0f0;
}

.right {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: #f0f0f0;
}

总结对比

布局方式	优点	缺点	适用场景
浮动布局	兼容性好	需要清除浮动，代码复杂	传统项目，需要兼容老浏览器
Flexbox	代码简洁，灵活	IE10+	现代项目，需要灵活布局
Grid	二维布局能力强	IE10+（部分特性）	复杂网格布局
圣杯布局	中间栏优先加载	实现复杂	需要SEO优化的项目
双飞翼布局	兼容性好	HTML结构稍复杂	传统项目，需要中间栏优先

推荐：在现代项目中，优先使用 Flexbox 或 Grid 实现，它们代码更简洁、维护性更好。