对淘宝双飞翼布局的的一点理解

最近回头又看了一看CSS布局方面的东西，重新温习了一下三栏布局，即两边定宽，中间自适应的网页结构。最著名的三栏布局当然是圣杯布局和基于圣杯布局改进后的淘宝双飞翼布局。几年前第一次看这个布局的时候刚开始做前端，也就是当‘布局’看了。

一个双飞翼布局结构如下。三个部分依次是middle, left, right全部float=left. 当然将middle的width设为100%来达到responsive是应有之义，当时觉得最神奇的是左边的的盒子可以通过设置margin-left: -100%飘到middle前面去。现在想想还是太肤浅，这个布局方式真正好的地方在于三个部分的排列顺序，middle一般是主内容，左右两边可能是导航栏和广告栏，用户真正想看的内容正是middle，middle放在三个盒子的第一位可以保证其是最先渲染呈现给客户的。如何更快速的渲染页面是个大命题。不管怎么样，也许晚了些，补上标红的第三点，双飞翼布局的要点应该就齐活了。

网上关于双飞翼布局的代码例子很多，我就不贴了。。。

<div class="container">

  <div class="middle">

    设置left部分的负边距，即left {margin-left:-100%;}。这样left可以往最左边移动。

    将.right {margin-left：-200px;}。这样右盒子才可以在一行的最右边显示出自己。

    尽管当前middle是自适应宽度，但是middle的内容会被左右盒子给压住一部分。

    所以需要给left和right设置相对定位。

  </div>

  <div class="left">Left</div>

  <div class="right">Right</div>