实现左右两边固定宽度，中间自适应的布局的几种方法

实现效果

一、float实现

  
    
    
    
    
    
  
  
    

      
left
      
right
      
middle
    
  

二、flex实现

请移步flex笔记

三、absolute实现

左右两边设置absolute，分别设置left为0、right为0，设置宽度，中间部分只需设置左右的margin即可。

  
    
    
    
    
  
  
  
    

      
1
      
2
      
3
    
  

四、grid实现

 Grid网格布局实现非常简单，只需几行代码。

  
    
    
    
    
  
  
  
    

      
1
      
2
      
3
    
  

五、table-cell

  
    
    
    
  
  
    

      
left
      
middle
      
right
    
  

总结：

 1、float布局使用的时候一定要注意清除浮动。

2、Position布局只是根据定位属性来设置元素位置，不太适合用做页面布局。

3、flex布局虽然很好用，但是还是存在IE上的兼容性问题，只能支持到IE9以上。

4、grid网格布局很强大，但是兼容性很差。

5、table布局使用起来方便，兼容性也不存在问题，但是不利于搜索引擎抓取信息。