004.CSS 布局：圣杯、双飞翼

这两种三栏式布局都实现了中间内容优先渲染、两侧固定宽度、中间宽度自适应的特点

圣杯布局

<div class="container">
  <div class="main">#main (自适应)</div>
  <div class="left">#left (200px)</div>
  <div class="right">#right (200px)</div>
</div>

.container {
  padding: 0 200px; /* 左右内间距等于左右列宽度 */
}
.main {
  width: 100%;
  float: left;
}
.left {
  width: 200px;
  float: left;
  margin-left: -100%; /* 移动到 main 左侧 */
  position: relative;
  left: -200px; /* 再向左移动自身宽度 */
}
.right {
  width: 200px;
  float: left;
  margin-left: -200px; /* 移动到 main 右侧 */
  position: relative;
  right: -200px; /* 再向右移动自身宽度 */
}

双飞翼布局

<div class="container">
  <div class="main-wrapper">
    <div class="main">#main (自适应)</div>
  </div>
  <div class="left">#left (200px)</div>
  <div class="right">#right (200px)</div>
</div>

.main-wrapper {
  width: 100%;
  float: left;
}
.main {
  margin: 0 200px; /* 内容区域留出边距 */
}
.left {
  width: 200px;
  float: left;
  margin-left: -100%; /* 移动到最左侧 */
}
.right {
  width: 200px;
  float: left;
  margin-left: -200px; /* 移动到最右侧 */
}

核心区别：

• DOM 结构：圣杯的列元素直接位于容器内，而双飞翼在 main 外层添加了容器
• 实现方式：圣杯通过相对定位调整位置，双飞翼通过 margin 控制
• 兼容性：双飞翼解决圣杯布局中小屏下的样式错乱问题