左右固定，中间自适应的三栏式布局五种写法

三栏式布局是工作中常用的布局方式，三栏式布局有多种写法，作为前端开发，对布局的了解也是一项基本功，

下面是整理的五种三栏式布局的基本写法

公共样式

 //清除默认样式
 html *{padding: 0;margin:0;}
//layout公共样式
.layout{margin-top:20px;}
.layout div{min-height: 100px;}

 

1. 浮动布局（浮动会是文档脱离文档流，需要清浮动）

    
    

        

        

        

            
浮动布局
            这是中间部分
        

    

 

2. 绝对定位布局（绝对定位也会脱离文档流）

    
    

        

        

            
绝对定位布局
            这是中间部分
        
        

    

 

3. flex布局（css3的新语法，pc兼容性问题，常用于移动端，中间被内容撑开高度时，左右两边的高度也能同中间保持一致）

    
    

        

        

            
flex布局
            这是中间部分
        
        

    

 

4. 表格布局（中间被内容撑开高度时，左右两边的高度也能同中间保持一致）

    
    

        

        

            
表格布局
            这是中间部分
        
        

    

 

5.网格布局（新语法，代码量少）

    
    

        

        

            
网格布局
            这是中间部分
        
        

    

 

转载于:https://www.cnblogs.com/leiting/p/8195966.html