css佈局之聖盃佈局和雙飛翼佈局

聖盃佈局和雙飛翼佈局都是實現三欄佈局的方法，左右定寬，中間自適應，是很常見的佈局，其原理差很少，都有負邊距的應用

效果圖：

聖盃佈局

html佈局：

<div class="header"></div>
     	<div class="content">
		<div class="middle"></div>
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="footer"></div>
複製代碼

css樣式：

.header {
			width: 100%;
			height: 30px;
			background: red;
		}

		.content {
			overflow: hidden;
			padding: 0 100px;
		}

		.footer {
			width: 100%;
			height: 30px;
			background: red;
		}

		.middle {
			position:relative;			
			width: 100%;
			float: left;
			height: 80px;
			background: green;
		}

		.left {
			position:relative;
			width: 100px;
			float: left;
			left:-100px;
			height: 80px;
			margin-left: -100%;
			background: yellow;
		}

		.right {
			position:relative;			
			width: 100px;
			float: left;
			right:-100px;
			height: 80px;
			margin-left: -100px;
			background: pink
		}
複製代碼

這裏有幾點須要留意：
1: 先寫middle,而後是left和right，由於須要先渲染middle
2: left、right需設置position:relative以及相應的left、right值
3:理解負邊距的做用，left的margin-left:-100%使它上移一行，同時right向左移佔據left原先位置，同理，right的margin-left:-100px使它上移並靠右

負邊距實際上是這兩種佈局的重中之重，這裏不作深刻，有興趣能夠看這篇文章：
www.cnblogs.com/2050/archiv…

雙飛翼佈局

html佈局

<div class="header"></div>
	<div class="content">
		<div class="middle">
			<div class="inner-middle"></div>
		</div>
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="footer"></div>
複製代碼

css樣式

.header {
			width: 100%;
			height: 30px;
			background: red;
		}

		.content {
			overflow: hidden;
		}

		.footer {
			width: 100%;
			height: 30px;
			background: red;
		}

		.middle {			
			width: 100%;
			float: left;
		}
               .inner-middle{
			width:100%;
			height: 80px;
			
			background: green;			
		}
		.left {
			width: 100px;
			float: left;
			height: 80px;
			margin-left: -100%;
			background: yellow;
		}

		.right {			
			width: 100px;
			float: left;
			height: 80px;
			margin-left: -100px;
			background: pink
		}
複製代碼

額...跟聖盃佈局沒多大區別，就是middle的實現不同，聖盃佈局是middle+padding，雙飛翼採用子元素+margin，最主要的仍是負邊距的使用