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