前言
圣杯布局和双飞翼布局是页面布局的常用布局方式。两者都是为了实现两侧宽度固定,中间宽度自适应的三栏布局,但两者在实现方式上有一定的差别,不过都遵循了以下要点:
- 两侧宽度固定,中间官渡自适应
- 中间部分在DOM结构上优先,以便先行渲染
- 允许三列中的任意一列成为最高列
- 只需要一个额外的
<div></div>
标签
一、圣杯布局
实现方式:
- 三者都设置向左浮动。
- 设置中间宽度为100%。
- 设置容器的padding值给左右两部分留出空间。
- 左部分:设置margin-left为-100%,定位设置为relative,right设置为width px
- 右部分:设置margin-right为-width px
HTML
<div class="header">Header</div>
<div class="container">
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="footer">Footer</div>
- 主体main放在前面可以优先加载
- 中间部分由
container
包裹的main
、left
、right
三列组成,main
写在最前面
CSS
html,body {
margin: 0;
padding: 0;
min-width: 600px;
}
.header {
height: 200px;
background-color: #105B63;
}
.container {
padding: 0 200px 0 200px;
}
.container > div {
float: left;
}
.main {
height: 200px;
width: 100%;
background-color: #DB9E36;
}
.left {
width: 200px;
height: 200px;
margin-left: -100%;
position: relative;
right: 200px;
background-color: #FFFAD5;
}
.right {
width: 200px;
height: 200px;
margin-right: -200px;
background-color: #FFD34E;
}
.footer {
height: 200px;
clear: both;
background-color: #BD4932;
}
二、双飞翼布局
HTML
<div class="header">Header</div>
<div class="container column">
<div class="main">Main</div>
</div>
<div class="left column">Left</div>
<div class="right column">Right</div>
<div class="footer">Footer</div>
与圣杯布局相比,双飞翼HTML只为main
包裹了div
,这是为了处理margin中内容被遮盖的问题。
CSS
html,body {
margin: 0;
padding: 0;
}
body {
min-width: 450px;
}
.header {
height: 160px;
background-color: #DB9E36;
}
.container {
width: 100%;
}
.column {
float: left;
}
.main {
height: 200px;
margin: 0 200px 0 200px;
background-color: #105B63;
}
.left {
width: 200px;
height: 200px;
margin-left: -100%;
background-color: #FFD34E;
}
.right {
width: 200px;
height: 200px;
margin-left: -200px;
background-color: #BD4932;
}
.footer {
height: 200px;
clear: both;
background-color: #FFFAD5;
}
为三个column
设置float,采用负边距将左、右测部分定外到container
的margin留的空白处。
相比圣杯布局,双飞翼不比设置左右部分的position: relative
,也不比设置left、right值,简单了不少,但圣杯布局的DOM结构更加直观和自然。
三、Flex布局
Flex布局又称弹性布局,在实现上更简单和实用。
HTML
html,body {
margin: 0;
padding: 0;
}
.header {
height: 200px;
background-color: #105B63;
}
.container {
height: 200px;
display: flex;
}
.left {
width: 200px;
background-color: #FFFAD5;
}
.main {
flex: 1;
background-color: #FFD34E;
}
.right {
width: 200px;
background-color: #BD4932;
}
.footer {
height: 200px;
background-color: #DB9E36;
}
本质上是利用flex: 1
这个属性,使中间部分main可以自适应。