双飞翼布局与圣杯布局

前言

三列布局是一种比较基础的布局，分别是左列 left，主要用作导航，在整个布局的左边，宽度固定；主列 main 居中，用来显示整个网页的主要内容，宽度自适应；右列 right，平时主要用来显示广告等内容，在整个布局的右边，宽度固定。

那么我们怎么实现这种三列布局呢，先说一下我们平常的方法。

让左列 left 右列 right 分别左右浮动，然后给主列设置左右外边距 margin-left 和 margin-right，即可实现主列自适应。

代码如下：

DOM:

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

CSS:

.left {
  float: left;
  height: 200px;
  width: 100px;
  background-color: #bd4147;
}
.right {
  float: right;
  height: 200px;
  width: 200px;
  background-color: #419641;
}
.main {
  margin-left: 120px;
  margin-right: 220px;
  height: 200px;
  background-color: #01549b;
}

但是这种方法有一个缺点，就是左列 left 和右列 right 必须在主列 main 的前面，顺序不能改变，这就导致主列所显示的主页面无法率先加载，影响用户体验。

圣杯布局

DOM:

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

圣杯布局的思路是把左列 left 右列 right 主列 main 分别浮动，然后用负外边距给左右两列进行定位；

CSS 如下:

.main {
  float: left;
  width: 100%;
  height: 200px;
  background-color: #01549b;
}
.left {
  float: left;
  height: 200px;
  width: 100px;
  margin-left: -100%;
  background-color: #bd4147;
}
.right {
  float: left;
  height: 200px;
  width: 200px;
  margin-left: -200px;
  background-color: #419641;
}

左右两列定位了，main 还没有定位，所以会出现左右列覆盖主列 main 的情况，这时我们给容器 container 添加左右内边距 padding-left 和padding-right，成功定位主列 main

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

但这时候左右两列会受容器左右内边距的影响，所以给他们添加相对定位；

.left {
  position: relative;
  left: -120px;
}
.right {
  position: relative;
  right: -220px;
}

最终代码如下：

DOM:

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

CSS:

.container {
  padding-left: 120px;
  padding-right: 220px;
}
.main {
  float: left;
  width: 100%;
  height: 200px;
  background-color: #01549b;
}
.left {
  position: relative;
  left: -120px;
  float: left;
  height: 200px;
  width: 100px;
  margin-left: -100%;
  background-color: #bd4147;
}
.right {
  position: relative;
  right: -220px;
  float: left;
  height: 200px;
  width: 200px;
  margin-left: -200px;
  background-color: #419641;
}

圣杯布局的优点：

主列率先加载
允许任何列是最高的
DOM 结构简单

缺点：

和双飞翼布局相比 CSS 样式较为复杂

双飞翼布局

双飞翼布局源自淘宝 UED，第一步和圣杯布局一样，浮动三列，给左右两列设置负外边距；同样会覆盖主列 main，双飞翼布局的做法是在主列 main 后面添加了一个宽度为 100%的 div，再设置主列 main 的左右边距，代码如下：

DOM:

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

CSS:

.wrap {
  float: left;
  width: 100%;
}
.main {
  height: 200px;
  margin-left: 110px;
  margin-right: 210px;
  background-color: #01549b;
}
.left {
  float: left;
  height: 200px;
  width: 100px;
  margin-left: -100%;
  background-color: #bd4147;
}
.right {
  float: left;
  height: 200px;
  width: 200px;
  margin-left: -200px;
  background-color: #419641;
}

优点：

率先加载主列 main
允许任何列是最高的
CSS 样式简单

缺点：

和圣杯布局相比 DOM 结构较为复杂

实现三列布局还有很多种方法，比如用时下比较流行的 Flex，等等。

这里只讨论双飞翼和圣杯布局，请大家指正。

加我微信 liruifengv2333，进群交流，抱团取暖。

新生代程序员群
Astro 学习交流群

关注公众号 SayHub，带来更多原创内容。

很高兴见到你，欢迎来玩儿~