双飞翼布局

• 需求
  双飞翼布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列第三宽度。
  双飞翼布局与圣杯布局的不同位置，圣杯布局的左中右三列容器，中间多了一个子容器存在，通过控制中间的子容器的边距或者padding空出左右两列的宽度。

• 重点

  • 双飞翼布局的关键点是通过margin-left属性将左右两列放置到准确的位置，通过控制中间的子容器的-margin或者padding空出左右两列的宽度
  • 双飞翼布局的关键点需要设置padding
  • 双飞翼布局的关键点margin-left取百分比时，是父行为元素的宽度为基准的

例子：
HTML：

<div class="container">
    <div 
1