圣杯布局与双飞翼布局

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

圣杯布局

整体布局，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>

双飞翼布局

如果把三栏布局比作一只大鸟，可以把 main 看成是鸟的身体，sub 和 extra 则是鸟的翅膀。
这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。

整体布局，main，sub，extra 依次排列。

1. main，sub，extra 均设置float: left;；
2. main 设置宽度 100% 占满；
3. 将 sub 拉至最左边，使用margin-left: -100%;，同理 extra 设置margin-right: -200px;；
4. main 的内部增加一层.main-inner{margin: 0 200px;}；

.main,
.sub,
.extra {
    float: left;
}

.main {
    width: 100%;
    background: blue;
}

.main-inner {
    margin: 0 200px;
}

.sub {
    margin-left: -100%;
    width: 200px;
    background: red;
}

.extra {
    margin-left: -200px;
    width: 200px;
    background: yellow;
}

<div class="main">
    <div class="main-inner">
        main
    </div>
</div>
<div class="sub">sub</div>
<div class="extra">extra</div>

flex 实现类似布局

.main {
    display: flex;
    flex-direction: row;
}

.middle {
    flex-grow: 1;
}

.left,
.right {
    flex-grow: 0;
    flex-basis: 200px;
}

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

圣杯布局与双飞翼布局

原文：https://www.cnblogs.com/xiaoyucoding/p/12550764.html