css布局--圣杯&双飞翼

圣杯布局(float + 负margin + padding + position)

注意：

1. 三者都设置向左浮动。

2. 设置grail_main宽度为100%，设置两侧栏的宽度。

3. 设置 负边距，grail_left设置负左边距为100%，grail_right设置负左边距为负的自身宽度。

4. 设置grail的padding值给左右两个子面板留出空间。

5. 设置两个子面板为相对定位，grail_left的left值为负的grail_left宽度，grail_right的right值为负的grail_right宽度。

<section class="grail">
	<style>
		.grail {
			padding-left: 100px;
			padding-right: 200px;
			overflow: hidden;
		}
		.grail>div {
			min-height: 100px;
			float: left;
			text-align: center;
			line-height: 100px;
		}
		.grail>.grail_main {
			width: 100%;
			background: #ccc;
		}
		.grail>.grail_left {
			width: 100px;
			margin-left: -100%;
			position: relative;
			left: -100px;
			background: #999;
		}
		.grail>.grail_right {
			width: 200px;
			margin-left: -200px;
			position: relative;
			right: -200px;
			background: #aaa;
		}
	</style>
	<div class="grail_main">圣杯布局main</div>
	<div class="grail_left">left</div>
	<div class="grail_right">right</div>
</section>

双飞翼布局 (float + 负margin + margin)

注意：

1. 三者都设置向左浮动。

2. 设置main-wrap宽度为100%，设置两个侧栏的宽度。

3. 设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。

4. 设置main的margin值给左右两个子面板留出空间。

<section class="wing">
	<style>
		.wing {
			overflow: hidden;
		}
		.wing div {
			min-height: 100px;
			text-align: center;
		}
		.wing>.wrap {
			float: left;
			width: 100%;
			background: #ccc;
		}
		.main {
			margin: 0 200px 0 100px;
		}
		.wing>.left {
			float: left;
			width: 100px;
			margin-left: -100%;
			background: #999;
		}
		.wing>.right {
			float: left;
			width: 200px;
			margin-left: -200px;
			background: #aaa;
		}
	</style>
	<div class="wrap">
		<div class="main">双飞翼布局main</div>
	</div>
	<div class="left">left</div>
	<div class="right">right</div>
</section>