圣杯布局和双飞翼布局

两种布局都是：两侧宽度固定、中间宽度自适应，中间部分在DOM结构上优先，优先渲染。

圣杯布局：

HTML

<!-- 最外层容器 -->
<div class="container">

	<!-- 中间 -->
	<div class="center">center</div>
	
	<!-- 左侧 -->
	<div class="left">left</div>
	
	<!-- 右侧 -->
	<div class="right">right</div>
	
</div>

CSS

body {
  min-width: 500px;
  background: gray;
}

.container{
	padding-left: 200px;
	padding-right: 100px;
	background: lightblue;
}

.center{
	width: 100%;
	height: 300px;
	background: lightcyan;
	float: left;
}

.left{
	width: 200px;
	height: 300px;
	background: lightpink;
	position: relative;
	left: -200px;
	float: left;
	margin-left: -100%;
}

.right{
	width: 100px;
	height: 300px;
	background: lightseagreen;
	float: left;
	margin-right: -100px;
}

双飞翼布局：

HTML

<!-- 中间 -->
<div class="center-container">
	<div class="center">center</div>
</div>

<!-- 左侧 -->
<div class="left">left</div>

<!-- 右侧 -->
<div class="right">right</div>

CSS

.center-container{
	float: left;
	width: 100%;
	background: gray;
}

.center{
	height: 300px;
	margin-left: 200px;
	margin-right: 100px;
	background: lightblue;
}

.left{
	float: left;
	width: 200px;
	height: 300px;
	background: lightpink;
	margin-left: -100%;
}

.right{
	float: left;
	width: 100px;
	height: 300px;
	background: lightgreen;
	margin-left:-100px;
}

学习: margin负边距