双飞翼布局和圣杯布局

双飞翼布局和圣杯布局

     网页开发中，经常会遇见左中右垂直三栏的布局方式，两侧结构宽度固定，中间自适应，有时候需要优先加载中间区域，那么便在DOM结构上便有所要求，需要中间区域在前，左右区域在后。
     首先三个元素横向排列，用浮动实现。

.center{float: left;}
.left{float: left;}
.right{float: left;}

    就是中间的在最前面，而且宽度没有自适应网页。中间区域用宽度百分百解决，位置用margin-left移动。

.center{width:100%;}

    浮动在下面的原因是上面被占满换行了，所以左方块左移动整个浏览器窗口宽度，右方块移动右方块的宽度。

.left{margin-left:-100%}
.right{margin-left:300px}

一、圣杯布局

    给box添加声明padding-left：left的宽度；padding-right：right的宽度；
（这里也可以用css3新增的属性calc()，width:calc(100% - 500px)相当于是一个计算器，减去左右的宽度，让中间宽度自适应）
css结构：

.box{paddling-left:200px:padding-right:300px}

html结构：

		<div class="box">
			<div class="center">中间部分</div>
			<div class="left">左边部分</div>
			<div class="right">右边部分</div>
		</div>

    然后用定位移回左右原位置。相对于现在位置移动用相对定位比较方便.

.left{position:relative;left:-200px;}
.right{position:relative;right:300px;}

双飞翼布局

    双飞翼区别是在center里面创建一个子元素，利用子元素和左右两侧区块实现左右宽度固定中间宽度自适应。
css结构：

.bg{margin-left:200px;margin-right:300px;}

html结构

		<div class="box">
			<div class="center">
				<div class="bg">中间部分</div>
			</div>
			<div class="left">左边部分</div>
			<div class="right">右边部分</div>
		</div>

    此时中间区域的不再是center，而是center的子元素，子元素用声明margin-left，margin-right空出左右区块。

总结

    圣杯布局和双飞翼布局很像，区别是圣杯布局同一级结构显示上左中右排列。双飞翼结构是center的子元素和left，right实现显示上左中右排列。