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>