CSS——“圣杯式布局”

圣杯式布局主要使用三个样式：float:left，margin-left，以及position:relative。

圣杯式布局为【固定左右，中间宽度自适应】的经典布局。话不多说直接开干：

<div id="header">header</div>
<div id="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div id="footer">footer</div>

*注意main要放在第一个盒子
样式表：
设置container中三个盒子全浮动，
【main的width为100%】,
此时left和right就被挤下第二行，
通过设置
【margin-left:150px;(left的width)】
可发现left上了main那一行，则可设想通过调整位置即可将left和right移上上一行，
因此设置
【.left{margin-left:-100%;}和.right{margin-left:-200px}】，
叮！很神奇吧。

但是

此时有个问题，就是left和right是“盖住”main的左右两个部分的，因此给父盒子

【container设置{padding-left:150px;padding-right:200px;}】

效果如图：

再通过最核心的设置position:reletive;（相对定位：可通过偏移量变化位置，但所占空间位置不变）

设置：

【.left{position:relative;left:-150px}和.right{position:relative;right:-200px;}】，

刷新一下，bingo！

就完美圣杯式布局啦！

最后po代码：

body{margin:0;padding:0;}
#header,#footer{width: 100%;height: 30px;background-color: greenyellow;clear: both;}
#container{
    padding-left: 150px;
    padding-right: 200px;
}
.left{
    background-color: orange;
    width: 150px;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -150px;
}
.main{
    background-color: blue;
    float: left;
    width:100%;
}
.right{
    background-color: gold;
    width: 200px;
    float: left;
    margin-left: -200px;
    position: relative;
    right: -200px;
}