目錄

聖盃佈局和雙飛翼佈局

聖盃佈局

雙飛翼佈局

聖盃佈局和雙飛翼佈局

聖盃佈局和雙飛翼佈局是兩種常見的三欄佈局方式，都是兩邊欄定寬，中間欄自適應，實現方法類似。

聖盃佈局

<div class="container">
    <div class="column middle"></div>    //優先渲染中間部分
    <div class="column left"></div>
    <div class="column right"></div>
</div>
 

html, body, .container{
    height: 100%;
    margin: 0;
}

.container{
    padding: 0 200px 0 100px;
}

.container .column{
    height: 100%;
    float: left;
    position: relative;
}

.container .middle{
    width: 100%;
    background-color: salmon;
}

.container .left{
    left: -100px;
    width: 100px;
    margin-left: -100%;
    background-color: orange;
}

.container .right{
    right: -200px;
    width: 200px;
    margin-left: -200px;
    background-color: red;
}
 

雙飛翼佈局

<div class="container">
    <div class="column middle">    //優先渲染中間部分
        <div class="main"></div>
    </div>    
    <div class="column left"></div>
    <div class="column right"></div>
</div>
 

html, body, .container{
    heigth: 100%;
    margin: 0;
}

.container .column{
    height: 100%;
    float: left;
}

.container .middle{
    width: 100%;
    background-color: salmon;
}

.container .middle .main{
    margin: 0 200px 0 100px;
}

.container .left{
    width: 100px;
    margin-left: -100%;
    background-color: sandybrown;
}

.container .right{
    width: 200px;
    margin-left: -200px;
    background-color: sienna;
}