圣杯布局与双飞翼布局

圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。

圣杯布局

整体布局，main 为外部容器，容器内 middle、left、right 依次排列（注意排列顺序）。

1. 设置外部容器.main {padding: 0 200px;}；
2. 左中右部分，均设置float: left;；
3. middle 部分.middle {width: 100%;}占满；
4. 设置.left{margin-left: -100%;}使其占住 middle 的左侧；
5. 此时 left 覆盖了 middle 的部分，再设置.left{position: relative;right: 200px;width: 200px;}；
6. right 部分设置.right{margin-right: -200px;}即可。

.main {
    padding: 0 200px 0 200px;
    height: 300px;
}

.middle {
    float: left;
    width: 100%;
    height: 300px;
    background: blue;
}

.left {
    position: relative;
    right: 200px;
    float: left;
    width: 200px;
    height: 300px;
    background: red;
    margin-left: -100%;
}

.right {
    float: left;
    width: 200px;
    height: 300px;
    background: yellow;
    margin-right: -200px;
}

<div class="main">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

标签：right,圣杯,middle,布局,height,双飞翼,left,width,200px
来源： https://www.cnblogs.com/xiaoyucoding/p/12550764.html