圣杯布局与双飞翼布局
缪运泽
6月 10, 2016
圣杯布局与双飞翼布局
圣杯布局
<html>
<head>
<title>圣杯布局</title>
<style>
.container{
padding:0 200px;
}
.center, .left, .right{
float:left;
width:200px;
position:relative;
}
.center{
width:100%;
background-color:red;
}
.left{
left:-200px;
margin-left:-100%;
background-color:green;
}
.right{
left:200px;
margin-left:-200px;
background-color:blue;
}
</style>
</head>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</html>
思路：
1.最初
<html>
<head>
<title>圣杯布局</title>
<style>
.center{
background-color:red;
}
.left{
background-color:green;
}
.right{
background-color:blue;
}
</style>
</head>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</html>
效果如图1(这里为了看的清楚，为三列分别设了不同的背景色)
2.为保证center可以撑满浏览器，宽度应该设为100%，left和right的宽度随意，这里统一设为200px。修改后：
<html>
<head>
<title>圣杯布局</title>
<style>
.center{
background-color:red;
width:100%:
}
.left{
background-color:green;
width:200px;
}
.right{
background-color:blue;
width:200px;
}
</style>
</head>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</html>
效果如图2所示
3.利用浮动元素的负边距进行定位
<html>
<head>
<title>圣杯布局</title>
<style>
.center{
float:left;
width:100%;
background-color:red;
}
.left{
float:left;
width:200px;
background-color:green;
margin-left:-100%;
}
.right{
float:left;
width:200px;
background-color:blue;
margin-left:-200px;
}
</style>
</head>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
效果如图3所示
4.此时left与right已完成，需要对center进行定位。在container中设置padding：
<html>
<head>
<title>圣杯布局</title>
<style>
.container{
padding:0 200px;
}
.center{
float:left;
width:100%;
background-color:red;
}
.left{
float:left;
width:200px;
background-color:green;
margin-left:-100%;
}
.right{
float:left;
width:200px;
background-color:blue;
margin-left:-200px;
}
</style>
</head>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
效果如图4所示
5.此时center已正确定位，left和right收到container的padding影响，位置发生了偏移。需要利用relative，将left与right分别向左/右移动200px完成定位：
<html>
<head>
<title>圣杯布局</title>
<style>
.container{
padding:0 200px;
}
.center{
float:left;
width:100%;
background-color:red;
}
.left{
position:relative;
left:-200px;
float:left;
width:200px;
background-color:green;
margin-left:-100%;
}
.right{
position:relative;
left:200px;
float:left;
width:200px;
background-color:blue;
margin-left:-200px;
}
</style>
</head>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
双飞翼布局
双飞翼布局主要在中间一列(main-inner)的外面新增了一个main-outer
main-outer用于确定宽度等信息，这里的main-outer功能与上面的圣杯布局中前三步完全相同。
main-inner用于设置padding，直接将main中的内容放置正确位置，不需再对left和right进行设置
<html>
<head>
<title>双飞翼布局</title>
<style>
.main-outer, .left, .right{
float:left;
width:200px;
}
.main-outer{
width:100%;
background-color:red;
}
.left{
background-color:green;
margin-left:-100%;
}
.right{
background-color:blue;
margin-left:-200px;
}
.main-inner{
padding:0 200px;
}
</style>
</head>
<div class="main-outer">
<div class="main-inner">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</html>
区别
- 两者均利用了浮动&负边距
- 圣杯布局用一个container包含了center,left,right，在通过设置container中padding的方式完成center位置的确定，之后为了避免left与right对main的覆盖，通过相对定位的方式将他们移动至特定位置
- 双飞翼布局在main-inner外部嵌套了一层main-outer，这里的left和right实际上是覆盖了outer的，但由于在main-inner中设置了padding，左右两边的覆盖并不会影响到main-inner