等高布局

所谓的圣杯布局和双飞翼布局，两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。

（1）圣杯布局

1. 给三栏都设置左浮动，让他们在同一行显示。
2. 给左侧的盒子设置margin-left:-100%;
3. 给右侧的盒子设置margin-left：负的右侧盒子宽度；
4. 给三个盒子的父元素设置padding值：padding：0 右边盒子的宽度 0 左边盒子的宽度
5. 左侧的盒子往左侧拽，给左侧的盒子设置相对于原来的位置定位，position：relative；
6. 右侧的盒子往右侧拽，给右侧的盒子设置相对于原来的位置定位，position：relative；

（2）双飞翼布局

登高布局：

举个例子：左边是导航部分，右边是详细内容，两者的高度都是不固定的。左边导航栏的内容可能比右边的内容高，反之亦然。但是两者的背景颜色高度始终保持一致！

（1）flex 实现，当然前提是不考虑IE得兼容问题

//html
<div class='box'>
    <div class='left'>
        <div class='bor'></div>
        dasdsgerfadcdasdsfdsfdsfdsfdsfdfsdf
    </div>
    <div class='right'>dsfdsfdsfdfsdf</div>
</div>


.box{ display: flex; }
.left,.right{ flex: 1; }
//这种方式简洁明了，不考虑IE兼容性的话是最优的选择