一、圣杯布局基本概论
圣杯布局指的是左右两栏固定宽度,中间部分自适应。如下
二、圣杯布局的原理
- 首先写出整体的布局(header+content+footer),其中content中包括center、left、right。一定是center在前,left在中,right在后。
<header>header</header>
<div id="content">
<div id="center" class="cloumn">center</div>
<div id="left" class="cloumn">left</div>
<div id="right" class="cloumn">right</div>
</div>
<footer>footer</footer>
- 构思left,right、center的宽度,并且给content设置上响应的左右边距。left中的width一定是和content的padding-left的大小一致;right中的width一定是和content的padding-right的大小一致;center的宽度为100%。
#content {
padding-left: 300px;
padding-right: 200px;
}
#center {
width: 100%;
}
#left {
width: 300px;
}
#right {
width: 200px;
}
- 要给center、left,right加上一个左浮动
.cloumn {
float: left;
}
- 把eft移动到center的左边。分为2个步骤:
a、把left移上去(margin-left: -100%是固定的,把left移动到content里面的最左边,%相对于父级定位)
#left {
width: 300px;
margin-left: -100%;
background-color: darkcyan;
}
b、把left移到center的左边(right中定位距离与left盒子的宽度一致)
#left {
position: relative;
width: 300px;
margin-left: -100%;
right: 300px;
background-color: darkcyan;
}
- 把right移动到center的右边边。(margin-right与right盒子的宽度一致)
#right {
width: 200px;
margin-right: -200px;
background-color: yellow;
}
三、圣杯布局的完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣杯布局</title>
<style>
* {
margin: 0;
padding: 0;
}
header {
background-color: #ccc;
}
#content {
padding-left: 300px;
padding-right: 200px;
}
#center {
width: 100%;
background-color: cyan;
}
#left {
position: relative;
width: 300px;
background-color: darkcyan;
margin-left: -100%;
right: 300px;
}
#right {
width: 200px;
background-color: yellow;
margin-right: -200px;
}
.cloumn {
float: left;
}
footer {
clear: both;
background-color: #ccc;
}
</style>
</head>
<body>
<h1>圣杯布局</h1>
<header>header</header>
<div id="content">
<div id="center" class="cloumn">center</div>
<div id="left" class="cloumn">left</div>
<div id="right" class="cloumn">right</div>
</div>
<footer>footer</footer>
</body>
</html>