关于双飞翼布局的个人操作总结

今天boss让我用双飞翼布局实现一个文字左右都有图片的三列效果，虽然最后把双飞翼研究明白了，但是效果的预期没有达到，最后就用其他方法了，但是学习的过程值得记录下来，以便后续使用时，方便查阅。

首先，我想说的是，很多框架都支持响应式布局，而双飞翼只是一种不依赖框架的针对三列布局的一种解决方案。

双飞翼布局能够解决的问题：

1、两边列宽度固定，中间列宽度自适应式布局；

2、中间内容区先被加载。

实现方法：

第2点比较好实现，只要把中间内容区写在最前面那么就会被先加载。

接下来就是实现这种布局了，首先我们想让中间区域能够宽度自适应，那么我们需要把中间区域的div设置成“width=100%”，两边区域的div也设置一下宽度，这里我都设置成”width=200px”。 那么左右两边的div就会被挤到下一行中。

既然如此敲黑板的地方就到了，首先我们想办法将左边的div放到左边，那么我们将其margin-left设置成-100%（这里设置负值的原因，是在浮动情况下，将外边距设置成负值，div会向上层移动，而设置成-100%，则能够保证div上移到最左边）,如下：

下面同理我们要想将右边的div能够与上面的同行显示在右边，那么我们给右边的div设置一个“margin-left=-200px”，大家可以注意到这里的负值与div的宽度相等，结果如下：

到了这里当然还没有结束，大家应该已经注意到，内容区的文字不见了，是因为左div将其挡住了，为了不让左右div挡住中间内容，我们还要给中间的div中加一个子div并给其设置一个“margin：0 200px”。

如此就将双飞翼的效果实现出来啦，所有的代码入下：

	
	



	

		

			

				我是中间内容区~
			
		
		
我是左边
		
我是右边
	

在最后说下双飞翼布局的优点：

1、可以实现主要内容区先加载；

2、兼容主流浏览器；

3、布局灵活，改变css即可改变布局方式。