圣杯布局和双飞翼布局

目录

圣杯布局和双飞翼布局

圣杯布局

双飞翼布局

---

圣杯布局和双飞翼布局

圣杯布局和双飞翼布局是两种常见的三栏布局方式，都是两边栏定宽，中间栏自适应，实现方法类似。

---

圣杯布局

<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;
}