其实圣杯布局和双飞翼布局实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果都是一样的，差别在于其实现的思想。
一、圣杯布局
html代码中，将重要的内容middle放在container的最前面，然后是left、right
1、将三者均设置
float:left
2、将middle的宽度设置为
width:100%;
使得middle占满一行
3、将left放在middle所在行的最左边，给left设置
margin-left:-100%;
4、left覆盖了middle内容的最左端，此时给container设置
padding:0 100px;
5、将left填充container最左边的空白部分，为left设置
position:relative;
left:-100px;
6、同理先给right设置
margin-left:-100px;
7、然后给right添加
position:relative;
right:-100px;
实现圣杯布局的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>圣杯布局</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
html,body{
margin:0;
padding:0;
}
.container{
border:1px solid;
padding:0 100px;
width:500px;
}
.container:after{
content:'';
display: block;
clear:both;
height: 0;
}
.main{
width:100%;
height:300px;
background-color: red;
float:left;
}
.aside{
width:100px;
height:100px;
background:blue;
float:left;
position: relative;
left:-100px;
margin-left:-100%;
}
.extra{
width:100px;
height:100px;
float:left;
background:yellow;
position: relative;
left:100px;
margin-left:-100px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
二、双飞翼布局
双飞翼布局与圣杯布局不同的是，在中间重要的内容块里面再嵌套了一个div用于放内容，然后设置该div的margin，来达到三栏式的效果。
1、将三者均设置
float:left
2、将middle的宽度设置为
width:100%;
使得middle占满一行
3、将left放在middle所在行的最左边，给left设置
margin-left:-100%;
4、将right放到middle所在行的最右变，给right设置
margin-left:-100px;
5、middle的一部分给left和right覆盖了，给middle中添加
<div class="wrap"></div>
6、然后设置wrap
margin:0 110px;
双飞翼的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>双飞翼布局</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
html,body{
margin:0;
padding:0;
}
.container{
border:1px solid;
width:500px;
}
.container:after{
content:'';
display: block;
clear:both;
height: 0;
}
.middle{
width:100%;
height:300px;
float:left;
}
.middle .wrap{
background:pink;
height:300px;
margin-left: 100px;
margin-right: 100px;
}
.left{
width:100px;
height:100px;
background:blue;
float:left;
margin-left:-100%;
}
.right{
width:100px;
height:100px;
float:left;
background:yellow;
margin-left:-100px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">
<div class="wrap"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
三、两个布局的异同
- 1.两种布局方式都是把主列放在文档流最前面，使主列优先加载；
- 2.两者在实现上的相同点在于都让三列浮动，然后通过负外边距形成三列布局；
- 3.两种布局方式的不同在于如何处理中间主列的位置：圣杯布局是利用父容器的左右内边距定位；双飞翼布局是把主列嵌套在div后利用主列的左右外边距定位。
网友评论