三列自适应两种实现方法

一、
圣杯布局：利用内边距去实现内容放置。
.box{
height:300px;
padding:0 200px;
}
.center{
width:100%;
height:300px;
background:darksalmon;
float:left;
}
.left{
width:200px;
height:300px;
background-color:darkseagreen;
float:left;
margin-left:-100%;
position:relative;
left:-200px;

    }
    .right{
        width:200px;
        height:300px;
        background-color:goldenrod;
        float:left;
        margin-left:-200px;
        position: relative;
        right:-200px;
    }
    
    
</style>

    <div class="box">
        <div class="center">11111111111</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

二、双飞翼布局：利用外边距去实现内容放置 .box{ height:300px; /* padding:0 200px; */ } .center{ width:100%; height:300px; background:darksalmon; float:left; } .left{ width:200px; height:300px; background-color:darkseagreen; float:left; margin-left:-100%; /* position:relative; left:-200px; */

    }
    .right{
        width:200px;
        height:300px;
        background-color:goldenrod;
        float:left;
         margin-left:-200px;
        /*position: relative;
        right:-200px; */
    }
    .inner{
        margin:0 200px;
    }
    
    
</style>

    <div class="box">
        <div class="center">
            <div class="inner">11111111111</div></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

总结：
（1）双飞翼比圣杯多了一个盒子，但是避免了使用相对定位position：relative计算。
（2）两者实现时，放置内容的center盒都必须优先写在第一位。
（3）width设置为auto时，不会出现溢出现象，width设置为100%时，会出现溢出现象。
auto：
W盒模型 = 父盒子的宽度 = 有效内容宽度 + padding
100%或者px 溢出：
W盒模型 = 有效内容宽度(父盒子的宽度) + padding