双飞翼布局与圣杯布局

发表日期:
分类: 编程技术
descriptive text

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

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

让左列 left 右列 right 分别左右浮动,然后给主列设置左右外边距 margin-leftmargin-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-leftpadding-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,等等。

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



本文作者:李瑞丰


本文采用 知识共享署名 4.0 国际许可协议 (CC BY 4.0),欢迎转载、或重新修改使用,但需要注明来源。


你的鼓励是我最大的支持,你可以在 知乎掘金 等平台关注我,也可以关注我的公众号 「SayHub」 获取更多内容。