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的宽度。