css布局-实现左中右布局的5种方式

左中右布局

    
    
    
    
    





    


    


        
左边
        
右边
        

            浮动float布局:
        
 左元素: float: left; 右元素: float: right; 中间元素:自动填充

    




    
    


        
左边
        

            绝对absolute定位布局:
        
 左边元素: position: absolute; left: 0;

            右边元素: position: absolute; right:0; 中间元素: position: absolute;left:300px; right: 300px;
        
        
右边
    





    

    

        
左边
        

            flex布局:
        
 父元素display:flex; 左右子元素设置宽度300px; 中间子元素设置flex:1;
        
右边
    




    
    

        
左边
        

            表格table布局:
        
 父元素width: 100%; display: table;
            左右子元素display: table-cell; width: 300px; 
        
右边
    




    
    

        
左边
        

            网格grid布局:
        
 父元素宽度为100%,
            父元素width: 100%; display:grid; grid-template-rows: 100; grid-template-columns: 300px auto 300px
        
右边