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;
		}

效果：

大功告成。