如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

问题解析

两栏/三栏布局是 Web 开发中最经典的布局模式。面试中考察这个问题，主要是想了解候选人对 CSS 布局技术的掌握程度，以及能否根据场景选择最合适的方案。

两栏布局（左侧固定，右侧自适应）

方案一：Flexbox（推荐）

.container {
  display: flex;
}

.sidebar {
  width: 200px;
  flex-shrink: 0; /* 防止侧边栏被压缩 */
}

.main {
  flex: 1; /* 占据剩余空间 */
}

优点：代码简洁，自适应性强，无需考虑高度问题

方案二：Float + BFC

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

.main {
  overflow: hidden; /* 触发 BFC，避开浮动元素 */
}

原理：BFC 的区域不会与浮动盒子重叠

方案三：Grid

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

三栏布局（左右固定，中间自适应）

方案一：Flexbox（推荐）

.container {
  display: flex;
}

.left, .right {
  width: 200px;
  flex-shrink: 0;
}

.middle {
  flex: 1;
}

方案二：圣杯布局（经典）

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

.container {
  overflow: hidden;
  padding: 0 200px; /* 给左右栏留出空间 */
}

.middle {
  float: left;
  width: 100%;
}

.left {
  float: left;
  width: 200px;
  margin-left: -100%;      /* 拉到最左边 */
  position: relative;
  left: -200px;            /* 补偿 padding */
}

.right {
  float: left;
  width: 200px;
  margin-left: -200px;     /* 拉到自身宽度的左边 */
  position: relative;
  right: -200px;           /* 补偿 padding */
}

特点：

中间内容优先加载（DOM 顺序在前）
需要相对定位补偿

方案三：双飞翼布局

<div class="container">
  <div class="middle-wrap">
    <div class="middle">中间内容</div>
  </div>
  <div class="left">左侧</div>
  <div class="right">右侧</div>
</div>

.middle-wrap {
  float: left;
  width: 100%;
}

.middle {
  margin: 0 200px; /* 用 margin 留出空间 */
}

.left {
  float: left;
  width: 200px;
  margin-left: -100%;
}

.right {
  float: left;
  width: 200px;
  margin-left: -200px;
}

圣杯 vs 双飞翼：

圣杯用 padding + 相对定位补偿
双飞翼用嵌套 div + margin 补偿
双飞翼更简洁，不需要相对定位

方案四：Grid（最现代）

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

深入理解

负 margin 原理

/* margin-left: -100% 会将元素向左拉一个父元素宽度 */
.left {
  margin-left: -100%;
}

/* margin-left: -自身宽度 会将元素向左拉自身宽度 */
.right {
  margin-left: -200px;
}

为什么中间内容要放前面

SEO 和性能考虑：

主要内容优先加载
搜索引擎爬虫先抓取重要内容
屏幕阅读器先朗读主要内容

各方案对比

方案	优点	缺点	适用场景
Flexbox	简单直观，自适应	IE 兼容性	现代项目首选
Grid	最简洁，二维控制	兼容性较差	现代浏览器项目
圣杯/双飞翼	内容优先，兼容性好	代码复杂	需要兼容旧浏览器
Float	兼容性好	需要清除浮动，高度不一致	旧项目维护

实际应用技巧

响应式两栏布局

.container {
  display: flex;
  flex-wrap: wrap;
}

.sidebar {
  flex: 1 1 200px; /* 可伸缩，基准 200px */
}

.main {
  flex: 3 1 400px; /* 占据更多空间，基准 400px */
}

@media (max-width: 768px) {
  .sidebar, .main {
    flex-basis: 100%; /* 小屏幕堆叠 */
  }
}

侧边栏可收缩

.container {
  display: flex;
}

.sidebar {
  width: 200px;
  transition: width 0.3s;
}

.sidebar.collapsed {
  width: 60px;
}

.main {
  flex: 1;
}

最佳实践

/* 现代项目推荐：Flexbox */
.layout-flex {
  display: flex;
}

.layout-flex .sidebar {
  width: var(--sidebar-width, 200px);
  flex-shrink: 0;
}

.layout-flex .main {
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
}

/* Grid 方案 */
.layout-grid {
  display: grid;
  grid-template-columns: var(--sidebar-width, 200px) 1fr;
}

.layout-grid-three {
  grid-template-columns:
    var(--left-width, 200px)
    1fr
    var(--right-width, 200px);
}

面试要点

能够说出至少 3 种实现三栏布局的方案
能够解释圣杯布局和双飞翼布局的区别
理解负 margin 的工作原理
了解内容优先加载的重要性
能够根据项目需求选择合适的方案