三栏布局技巧

三栏布局：两边定宽，中间自适应

BFC
双飞翼布局
圣杯布局
Flex 布局
绝对定位布局

PS：所有例子左右侧宽度均为 200px

BFC

左右设置 float，中间设置 overflow 属性触发 BFC

<div class="left"></div>
<div class="right"></div>
<div class="main"></div>

.left {
  float: left;
}
.right {
  float: right;
}
.main {
  overflow: auto;
}

缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验

CodePen - 三栏布局：BFC

双飞翼布局

中间左浮动并设置宽度 100%，main 显示内容并设置左右 margin，左侧左浮动，右侧右浮动，两侧均 margin-left 移动负 100%。

<div class="content">
  <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

.content {
  float: left;
  width: 100%;
}
.main {
  margin-left: 220px;
  margin-right: 220px;
}
.left {
  float: left;
  margin-left: -100%;
}
.right {
  float: right;
  margin-left: -100%;
}

双飞翼布局则是源于淘宝的 UED

CodePen - 三栏布局：双飞翼布局

圣杯布局

三栏设置浮动，让其在同一行显示。左右设置 position: relative，再设置 left, right 各 -220px。整体设置左右 padding/margin 220px

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

.container {
  padding-left: 220px;
  padding-right: 220px;
}

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

.left {
  float: left;
  margin-left: -100%;
  position: relative;
  left: -220px;
}

.right {
  float: right;
  margin-left: -100%;
  position: relative;
  right: -220px;
}

圣杯布局来源于 In Search of the Holy Grail

CodePen - 三栏布局：圣杯布局

Flex 布局

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

.container {
  display: flex;
}

.main {
  flex-grow: 1;
}

.left {
  order: -1;
}

CodePen - 三栏布局：Flex 布局

绝对定位布局

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

.container {
  position: relative;
}

.main {
  margin: 0 220px;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
}

CodePen - 三栏布局：绝对定位布局

# 三栏布局技巧

BFC

双飞翼布局

圣杯布局

Flex 布局

绝对定位布局

参考资料

# New 操作符

# 函数柯里化