CSS 左中右三列布局5种方式

CSS 左中右三列布局左右固定宽度，固定位置，中间自适应的5种方式

如图：

另：上中下三行布局点这里

1.float布局

左右分别float：left/right；中间撑开

    
    

      

      

      
z这个是一个三部分左-中-右的布局根据float设置 第三方哈咖啡这里是最近刚好中间内容
    
  

2.position: absolute固定定位

左中右全部设置position:absolute;左边left:0;右边right:0;中间：left:300px；right:300px;

    
    

      

      
z这个是一个三部分左-中-右的布局根据absolute设置 第三方哈咖啡这里是最近刚好中间内容
      

    
  

3.flex弹性盒子布局

中间flex：1;自动填充剩余空间

    
    

      

      
z这是flex布局
      

    
  

4.display:table;布局

    
    

      

      
这是table设置
      
1
    
  

5.display:grid; 网格布局

    
    

      

      
这是grid布局