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

flex

• css

.outer {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        align-content: stretch;
    }

• html

    
a1
    
a2

    
a3

• 渲染效果

绝对定位法

• css

html,body{ margin: 0px;width: 100%; }  
h3{height: 100px;margin:20px 0 0;}  
#left,#right{
  width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;
}  
#left{
  left:0px;
}  
#right{
  right: 0px;
}  
#center{
  margin:2px 210px ;background-color: #eee;height: 200px; 
}  

• html

        
我是左边
        
我是右边
        
我是中间

浮动法

• css

#left_self,#right_self{ width: 200px;height: 200px; background-color: #ffe6b8 }  
#left_self {float: left;}  
#right_self{float: right;}  
#center_self{margin: 0 210px;height: 200px; background-color: #a0b3d6}  

• html

  
我是左边
  
我是右边
  
我是中间

margin负值法

• css

#wrap{ width: 100%;height: 100px; background-color: black;float: left;}  
#wrap #center{ margin:0 210px; height: 100px;background-color: red; }  
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;}  
#left_margin {margin-left: -100%; background-color: pink}  
#right_margin{margin-left: -200px; background-color: blue;} 

• html

• 渲染效果前后对比