自适应三栏布局

1.绝对定位

左右绝对定位，中间margin

    <div class="box" style="position: relative;">
        <div class="s-left" style="position: absolute;left: 0;"></div>
        <div class="s-middle" style="margin: 0 200px 0;"></div>
        <!-- 不加上top ：0  -->
        <div class="s-right" style="position: absolute;right: 0;top: 0;"></div>
    </div>

2.flex 布局

中间flex:1

    <div  class="box" style="display: flex;">
        <div class="s-left" ></div>
        <div class="s-middle" style="flex: 1;"></div>
        <div class="s-right" ></div>
    </div>

3.浮动

左右浮动，中间margin

    <div  class="box" >
        <div class="s-left" style="float: left;"></div>
        <div class="s-right" style="float: right;" ></div>
        <!-- 中间栏必须放在后面 -->
        <div class="s-middle" style="margin: 0 200px 0;"></div>

    </div>

4.圣杯布局

父元素设置padding,全部左浮动，中间的提到第一行，给两边设置margin负值，使两边到移动到上一行，然后再设置相对定位

    <div  class="box" style="padding: 0 200px 0;">
        <div class="s-middle" style="float: left;width: 100%;"></div>
        <div class="s-left" style="float: left;margin-left: -1000px; position: relative;left: -200px;"></div>
        <div class="s-right" style="float: left;margin-left: -200px;position: relative;right: -200px;"></div>
    </div>

5.双飞翼布局

全部左浮动，左右分别margin 0，中间padding 300

    <div  class="box" >
        <div class="s-left" style="float: left;margin-left: 0;"></div>
        <div class="s-middle" style="float: left;padding: 0 300px 0;"></div>
        <div class="s-right" style="float: left;margin-right: 0;"></div>
        
    </div>