CSS 圣杯布局和双飞翼布局

今天在网上看到圣杯布局和双飞翼这两种布局说法， 去查了一下，把心得整理一下。

这两个布局是应用在三栏布局上的（当然也可以改成多栏），现在有下面一个布局：

<div id="container">    <div class="center"></div>    <div class="left"></div>    <div class="right"></div></div>

先写center的目的是先加载center内的内容（重要的先加载），首先把float什么的都加上，让三栏布局成型：

<style>.center{width: 100%;height: 200px;float: left;background-color: red;}.left{width: 200px;height: 150px;margin-left: -100%;float: left;background-color: blue;}.right{width: 200px;height: 180px;float:left;margin-left: -200px;background-color: green;}</style>

这个时候是这样子的：

明显中间的内容被两侧挡住了，那么接下来的工作就是调整三者之间的关系，这里圣杯布局和双飞翼布局的处理方法就有所不同了：

1）圣杯布局

圣杯布局首先设置最外层的div使center到自己应该到的位置：

#container{padding: 0 200px 0 200px;}

效果：

接下来调整左右两个div位置，这里用到的是position的relative：

.left{width: 200px;height: 150px;margin-left: -100%;float: left;background-color: blue;position: relative;left: -200px;}.right{width: 200px;height: 180px;float:left;margin-left: -200px;background-color: green;position: relative;right: -200px;}

效果：

大功告成。

2) 双飞翼布局

双飞翼布局简单粗暴一点，直接在center里面加一个新div，内容都放在innerCenter里面：

<div id="container">    <div class="center"><div class="innerCenter">aaa</div></div>    <div class="left"></div>    <div class="right"></div></div>

然后设置innerCenter的margin：

                .innerCenter{margin-left: 200px;margin-right: 200px;height: 200px;background-color: yellow;}

效果：

大功告成。