摘要：優(yōu)化方式二圣杯布局優(yōu)化方式三雙飛翼布局給元素包裹一個(gè)容器處理方式二和三解決方式非常類(lèi)似只是處理的細(xì)節(jié)不一樣具體用那個(gè)都可以一般推薦用前者上面就是實(shí)現(xiàn)的幾種方式細(xì)心同學(xué)應(yīng)該可以看到這兩種方式左右兩列并不會(huì)隨著中間內(nèi)容區(qū)域高度變化而變化。

常用方式羅列

float

absolute

table

flex

grid

    

        
left
        
right
        
center
    

.container {
    overflow: auto;  
}
.left {
    width: 200px;
    float: left;
    background-color: #1ABC9C;
}
.right {
    width: 200px;
    float: right;
    background-color: #2ECC71;
}
.center {
    margin-left: 200px;
    margin-right: 200px;
    background-color: #3498DB;
}

上面實(shí)現(xiàn)方式優(yōu)點(diǎn),實(shí)現(xiàn)簡(jiǎn)單兼容性好

缺點(diǎn)：根據(jù)渲染的規(guī)則,從上到下,也就是說(shuō)left和right會(huì)優(yōu)先渲染, center部分會(huì)最后渲染.

利用負(fù)margin來(lái)完成

    

        
center
        
center
        
center
        
center
        
center
        
center
        
center
    
    
left
    
right

.container {
    overflow: auto;  
}
.left,
.right,
.center {
    box-sizing: border-box;
}
.left {
    width: 200px;
    float: left;
    background-color: #1ABC9C;
    margin-left: -100%;
}
.right {
    width: 200px;
    float: right;  // float:left;
    background-color: #2ECC71;
    margin-left: -200px;
}
.center {
    float: left;
    width: 100%;
    padding-left: 200px;
    padding-right: 200px;
    background-color: #3498DB;

}

完成前面主要內(nèi)容優(yōu)先加載問(wèn)題,但是又有新問(wèn)題,當(dāng)主體內(nèi)容過(guò)長(zhǎng)的時(shí),發(fā)現(xiàn)背景(邊框、背景圖等等)影響到了兩側(cè)

    .center {
        background-clip:  content-box
    }

如果有邊框、背景圖片等顯然上面不能滿足。

    

        
center
        
center
        
center
        
center
        
center
        
center
        
center
    
    
left
    
right

.container {
    margin:0 200px;
    position: relative;
}
.left,
.right,
.center {
    box-sizing: border-box;
}

.center {
    float: left;
    width: 100%;
    background-color: #3498DB;
}
.left {
    position: relative;
    left:-200px;
    float: left;
    width: 200px;
    margin-left: -100%;
    background-color: #1ABC9C;
}

.right {
    position: relative;
    right:-200px;
    float: right;
    width: 200px;
    margin-left: -200px;
    background-color: #2ECC71;
}

    

        

            

                
center
                
center
                
center
                
center
                
center
                
center
                
center
            
        
        
left
        
right
    

.container {
    overflow: auto;
}

.left,
.right,
.center,
.center-warpper {
    box-sizing: border-box;
}
.center-warpper {
    float:left;
    width: 100%;
    padding-left: 200px;
    padding-right: 200px;
}
.center {
    width: 100%;
    overflow: auto;
    background-color: #3498DB;
}
.left {
    width: 200px;
    float: left;
    background-color: #1ABC9C;
    margin-left: -100%;
}

.right {
    width: 200px;
    float: right;
    background-color: #2ECC71;
    margin-left: -200px;
}

處理方式二和三解決方式非常類(lèi)似,只是處理的細(xì)節(jié)不一樣. 具體用那個(gè)都可以一般推薦用前者

 

    

        
center
        
center
        
center
        
center
        
center
        
center
        
center
    
    
left
    
right

.container {
    position: relative;
}

.left,
.right,
.center {
    box-sizing: border-box;
}
.center {
    position: absolute;
    left: 200px;
    right: 200px;
    background-color: #3498DB;
}
.left {
    position: absolute;
    left: 0;
    width: 200px;
    background-color: #1ABC9C;
}
.right {
    position: absolute;
    right: 0;
    float: right;
    width: 200px;
    background-color: #2ECC71;
}

     

        
left
        

            
center
            
center
            
center
            
center
            
center
            
center
            
center
        
        
right
    

.container {
    position: relative;
    display: table;
    width: 100%;
}

.left,
.right,
.center {
    box-sizing: border-box;
    display: table-cell;
}
.center {
    background-color: #3498DB;
}
.left {
    width: 200px;
    background-color: #1ABC9C;
}

.right {
    width: 200px;
    background-color: #2ECC71;
}

    
left
    

        
center
        
center
        
center
        
center
        
center
        
center
        
center
    
    
right

.container {
    position: relative;
    display: flex;
    width: 100%;
}

.left,
.right,
.center {
    box-sizing: border-box;
    display: table-cell;
}

.center {
    background-color: #3498DB;
    flex:1;
}

.left {
    width: 200px;
    background-color: #1ABC9C;
}

.right {
    width: 200px;
    background-color: #2ECC71;
}

 

    
left
    

        
center
        
center
        
center
        
center
        
center
        
center
        
center
    
    
right

.container {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: 200px auto 200px;
}

.left,
.right,
.center {
    box-sizing: border-box;
}

.center {
    background-color: #3498DB;
}

.left {
    background-color: #1ABC9C;
}

.right {
    background-color: #2ECC71;
}

上面就是實(shí)現(xiàn)的幾種方式, 細(xì)心同學(xué)應(yīng)該可以看到 float、absoulut 這兩種方式左右兩列并不會(huì)隨著中間內(nèi)容區(qū)域高度變化而變化。

如果想要?jiǎng)?chuàng)建三列布局中間自適應(yīng)，且三列都等高的話選擇 table、flex、Grid;

具體兼容可查閱 兼容性查看

如果有更好的方式，大家可以在評(píng)論區(qū)給出; 一起討論學(xué)習(xí)