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

pax大约 4 分钟

两栏布局（右侧自适应）和三栏布局（中间自适应）实现方法

一、两栏布局 - 右侧自适应

方法一：Flexbox（推荐）

.two-column-flex {
  display: flex;
}

.left {
  flex: 0 0 200px; /* 不放大，不缩小，固定宽度 200px */
  background: #f0f0f0;
  height: 300px;
}

.right {
  flex: 1; /* 占据剩余空间 */
  background: #e0e0e0;
  height: 300px;
}

<div class="two-column-flex">
  <div class="left">左侧固定宽度</div>
  <div class="right">右侧自适应宽度</div>
</div>

方法二：浮动 + BFC

.two-column-float {
  overflow: hidden; /* 触发 BFC */
}

.left {
  float: left;
  width: 200px;
  background: #f0f0f0;
  height: 300px;
}

.right {
  overflow: hidden; /* 触发 BFC */
  background: #e0e0e0;
  height: 300px;
}

<div class="two-column-float">
  <div class="left">左侧固定宽度</div>
  <div class="right">右侧自适应宽度</div>
</div>

方法三：绝对定位

.two-column-absolute {
  position: relative;
  height: 300px;
}

.left {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  background: #f0f0f0;
  height: 100%;
}

.right {
  margin-left: 200px;
  background: #e0e0e0;
  height: 100%;
}

<div class="two-column-absolute">
  <div class="left">左侧固定宽度</div>
  <div class="right">右侧自适应宽度</div>
</div>

方法四：Grid 布局

.two-column-grid {
  display: grid;
  grid-template-columns: 200px 1fr; /* 左侧 200px，右侧自适应 */
  height: 300px;
}

.left {
  background: #f0f0f0;
}

.right {
  background: #e0e0e0;
}

<div class="two-column-grid">
  <div class="left">左侧固定宽度</div>
  <div class="right">右侧自适应宽度</div>
</div>

方法五：Calc 计算

.left {
  float: left;
  width: 200px;
  background: #f0f0f0;
  height: 300px;
}

.right {
  float: left;
  width: calc(100% - 200px);
  background: #e0e0e0;
  height: 300px;
}

<div class="clearfix">
  <div class="left">左侧固定宽度</div>
  <div class="right">右侧自适应宽度</div>
</div>

二、三栏布局 - 中间自适应

方法一：Flexbox（推荐）

.three-column-flex {
  display: flex;
}

.left {
  flex: 0 0 200px;
  background: #f0f0f0;
  height: 300px;
}

.center {
  flex: 1; /* 自适应中间区域 */
  background: #e0e0e0;
  height: 300px;
}

.right {
  flex: 0 0 150px;
  background: #d0d0d0;
  height: 300px;
}

<div class="three-column-flex">
  <div class="left">左侧固定</div>
  <div class="center">中间自适应</div>
  <div class="right">右侧固定</div>
</div>

方法二：浮动 + BFC

.three-column-float {
  overflow: hidden;
}

.left {
  float: left;
  width: 200px;
  background: #f0f0f0;
  height: 300px;
}

.right {
  float: right;
  width: 150px;
  background: #d0d0d0;
  height: 300px;
}

.center {
  overflow: hidden; /* 触发 BFC */
  background: #e0e0e0;
  height: 300px;
}

<div class="three-column-float">
  <div class="left">左侧固定</div>
  <div class="right">右侧固定</div>
  <div class="center">中间自适应</div>
</div>

方法三：圣杯布局（双飞翼布局）

.three-column-holy-grail {
  padding: 0 150px 0 200px; /* 为左右栏预留空间 */
}

.center {
  float: left;
  width: 100%;
  background: #e0e0e0;
  height: 300px;
}

.left {
  float: left;
  width: 200px;
  background: #f0f0f0;
  height: 300px;
  margin-left: -100%;
  position: relative;
  left: -200px;
}

.right {
  float: left;
  width: 150px;
  background: #d0d0d0;
  height: 300px;
  margin-left: -150px;
  position: relative;
  right: -150px;
}

<div class="three-column-holy-grail">
  <div class="center">中间自适应</div>
  <div class="left">左侧固定</div>
  <div class="right">右侧固定</div>
</div>

方法四：Grid 布局

.three-column-grid {
  display: grid;
  grid-template-columns: 200px 1fr 150px; /* 左中右布局 */
  height: 300px;
}

.left {
  background: #f0f0f0;
}

.center {
  background: #e0e0e0;
}

.right {
  background: #d0d0d0;
}

<div class="three-column-grid">
  <div class="left">左侧固定</div>
  <div class="center">中间自适应</div>
  <div class="right">右侧固定</div>
</div>

方法五：绝对定位

.three-column-absolute {
  position: relative;
  height: 300px;
}

.left {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  background: #f0f0f0;
  height: 100%;
}

.right {
  position: absolute;
  right: 0;
  top: 0;
  width: 150px;
  background: #d0d0d0;
  height: 100%;
}

.center {
  margin: 0 150px 0 200px;
  background: #e0e0e0;
  height: 100%;
}

<div class="three-column-absolute">
  <div class="left">左侧固定</div>
  <div class="right">右侧固定</div>
  <div class="center">中间自适应</div>
</div>

三、各方法对比

两栏布局方案对比：

方案	优点	缺点	兼容性	推荐度
Flexbox	简单直观，响应式友好	需要 IE10+	现代浏览器	⭐⭐⭐⭐⭐
浮动+BFC	兼容性好	代码稍复杂	所有浏览器	⭐⭐⭐⭐
绝对定位	精确控制	脱离文档流	所有浏览器	⭐⭐⭐
Grid	布局强大	需要 IE10+	现代浏览器	⭐⭐⭐⭐
Calc	直观	需要清除浮动	IE9+	⭐⭐⭐

三栏布局方案对比：

方案	优点	缺点	兼容性	推荐度
Flexbox	简单直观，响应式友好	需要 IE10+	现代浏览器	⭐⭐⭐⭐⭐
浮动+BFC	兼容性好	代码稍复杂	所有浏览器	⭐⭐⭐⭐
圣杯布局	经典方案	理解困难	所有浏览器	⭐⭐⭐
Grid	布局强大	需要 IE10+	现代浏览器	⭐⭐⭐⭐
绝对定位	精确控制	脱离文档流	所有浏览器	⭐⭐⭐

四、响应式优化示例

/* 响应式两栏布局 */
.two-column-responsive {
  display: flex;
  flex-direction: column;
}

.left, .right {
  width: 100%;
}

@media (min-width: 768px) {
  .two-column-responsive {
    flex-direction: row;
  }
  
  .left {
    flex: 0 0 200px;
  }
  
  .right {
    flex: 1;
  }
}

五、总结

现代项目推荐使用 Flexbox：语法简洁，功能强大，兼容性好
老项目可使用浮动方案：兼容性最佳，适合需要支持老浏览器的场景
复杂布局考虑 Grid：对于更复杂的二维布局，Grid 是更好的选择
根据实际需求选择：考虑浏览器兼容性、维护成本和团队技能水平

对于大多数现代 Web 开发，Flexbox 是实现两栏和三栏布局的最佳选择。