Margin负边距使用之双飞翼布局

在页面布局中，经常会遇到左右两边宽度固定中间自适应的布局需要，其中有一个很巧妙的方式叫双飞翼布局。双飞翼是由淘宝玉伯等前端大牛提出的一种多列布局方法，主要利用了浮动、负边距、相对定位三个布局属性，使三列布局就像小鸟一样，拥有中间的身体和两侧的翅膀。下面是是实现原理：
1 首先给出html的div结构：

<div class="grid">
            <div id="div-middle">div-middle</span></div>
            <div id="div-left"><span>div-left</span></div>
            <