浮动实现双飞翼布局

双飞翼布局

描述

双飞翼布局： 左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列顶宽，中间列自适应剩余宽度。

比圣杯布局中间多了一个子容器，通过控制中间的子容器的margin或者padding 空出左右两列的宽度

核心点

• 通过margin-left 属性将左右两列放置到准确的位置，通过控制中间的子容器的margin
• html中div的顺序，影响渲染的层叠顺序，即div.left 需要在div.middle 下方
• 父元素不用设置padding
• margin-left取值为百分比时，是以父元素的宽度为基准的

代码

<div class="container">
      &l