css聖盃佈局和雙飛翼佈局

雙飛翼佈局和聖盃佈局其實是一樣的，只不過在寫法上有些不同，其佈局都是左右固定寬度，中間寬度自適應。

聖盃佈局

html結構

    
center
    
left
    
right

css
先寫出大概的樣式

.article{    height: 300px;    padding: 0 200px;
}.article .left{    width: 200px;    height: 100px;    background: blue;    float: left;
}.article .right{    width: 200px;    background: #ccc;    height: 100px;    float: right;
}.article .center{    background: yellow;    width: 100%;    height: 100%;    float: left;
}

現在的佈局是這樣的

image.png

在.left中新增

margin-left: -100%;

在.right中新增

margin-left: -200px;

佈局就變成了

image.png

最後，在.left中新增

position: relative;
left: -100%;

在.right中新增

position: relative;
right: -200px;

大功告成

image.png

完整程式碼

html>
    
    
    
    

        
center
        
left
        
right
    

雙飛翼佈局

雙飛翼佈局是在聖盃佈局基礎上改的
html結構改成了

    
center
    
left
    
right

css結構改成了

.article{    height: 300px;    overflow: hidden;
}.article .left{    width: 200px;    height: 100px;    background: blue;    float: left;    /*position: relative;
    left: -200px;*/
    margin-left: -100%;
}.article .right{    width: 200px;    background: #ccc;    height: 100px;    float: left;    /*position: relative;
    right: -200px;*/
    margin-left: -200px;
}.article .center{    background: yellow;    width: 100%;    height: 100%;    float: left;
}.center .inner{    margin-left: 200px;    margin-right: 200px;
}

頁面是這樣的

image.png

因為高度不一樣所以會顯得很難看，要想不固定高度，加上以下程式碼

.center,.left,.right{    padding-bottom: 9999px;    margin-bottom: -9999px;
}

大功告成

image.png

完整程式碼

html>
    
    
    
    

        
center
        
left
        
right
    

作者：我竟無言以對_1202
連結：