三栏布局:两边定宽,中间自适应

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 - 三栏布局:绝对定位布局

参考资料