css实现两边固定，中间自适应

经常有需求，所以就总结一下，有需要的时候直接复制粘贴啦…
布局的原理是margin负值法。首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left块的margin负值进行配合，具体原理参考这里。这里对圣杯布局解释特别详细。
html:

        <div id = "wrap">  
            <div id = "center"></div>  
        </div>  
        <div id = "left_margin"></div>  
        <div id = "right_margin"></div>  

css:

/*第1种写法*/

#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}  
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }  
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }  
#left_margin {margin-left: -100%; background-color: lightpink}  
#right_margin{margin-left: -200px;}  

/*第2种写法*/
*{padding: 0;margin:0;}
#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}  
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }  
#left_margin,#right_margin{top:0; position: absolute; width: 200px;height:  100px;background-color:#333}
#left_margin{left:0;} 
#right_margin{right:0;} 
#left_margin {background-color: lightpink} 

该方法在网站布局中非常常见，优点是三栏相互关联，有一定的抗性。需要注意的是，布局中间部分一定要放在前面，左右顺序不限制。对于left快的margin负值一定要等于wrap的宽度。