CSS 双飞翼布局

双飞翼布局：总共分三栏，左侧栏Left，中间主栏Main，右侧栏Right

第一步，建立三个div，不过注意，中间Main需要加一个wrap div. 整个结构看起来是这样的：


<style type="text/css">
	.mainWrap-1
	{
		width: 100%;
		background: #ccc;
	}
	.main-1
	{
		margin-left: 210px; /*左侧栏的宽度为200px，此处设置为210px，是为了留出10px的间隔*/
		margin-right: 310px;/*左侧栏的宽度为300px，此处设置为310px，是为了留出10px的间隔*/
		background: #c33;
	}
	.left-1
	{
		width: 200px;
		height: 300px;
		background: skyblue;
	}
	.right-1
	{
		width: 300px;
		height: 300px;
		background: green;
	}
</style>

<div class="mainWrap-1">	<div class="main-1"></div></div>   
<div class="left-1"></div>
<div class="right-1"></div>

Main,
margin-left:210px;
margin-right:310px;

大专栏 CSS 双飞翼布局iv class="left-1">Left
200px;

Right
300px;

看起来很混乱，对不对？

第二步：动起来！

A, mainWrap,left和right添加float：left；注意，main不添加！！
B, left 左移动100%的宽度：margin-left:-100%;
C, right左移动自身的宽度：margin-left:-300px;

Main

Left
float:left;
margin-left:-100%;

Right
float:left;
margin-left:-300px;

这就是双飞翼布局了！左右两侧宽度固定，中间主栏宽度自适应，而且，优先加载中间主栏内容，用户体验更好！

双飞翼布局，你值得拥有！