圣杯布局和双飞翼布局

圣杯布局和双飞翼布局，虽然两者的实现方法略有差异，不过都遵循了以下要点：

• 两侧宽度固定，中间宽度自适应
• 中间部分在 DOM 结构上优先，以便先行渲染
• 允许三列中的任意一列成为最高列

圣杯布局

• 页面分为左中右3个部分，其中左右两侧固定宽度，而中间部分自适应

html结构

• 这里把 center 部分放在最前面，然后是 left、right

<div class="container">
    <div class="center">中间自适应</div>
    <div class="left">左侧固定宽度</div>
    <div class="right">右侧固定宽度</div>
</div>

左右浮动 + 中间 100% 宽度

• 将三列都设置 float: left 使其在同一排显示
• left 和 right 设置固定宽度
• 由于 center 宽度为 100% 将父元素占满了，因此 left 和 right 只能换行显示

<style type="text/css">
    .container {
    	padding: 0 150px 0 200px;
    }
    .container>div {
        height: 200px;
        float: left;
    }
    .center {
        background: aqua;
        width: 100%;
    }
    .left {
        width: 200px;
        background: lightblue;
    }
    .right {
        width: 150px;
        background: lightgreen;
    }
</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5lWDYnHE-1608452414394)(https://gitee.com/lilyn/pic/raw/master/css-img/圣杯布局-都设为浮动,中间宽设为100%.jpg)]

• 设置 left margin-left: -100%，使其上移到 center 一行，并与 center 重叠
• 设置 right margin-right: -150px，使其上移到 center 一行，并与 center 重叠

• 设置 left position: relative; left: -200px
• 设置 left position: relative; left: 150px

• 如果宽度无法容下3个盒子会换行显示，设置 min-width: 600px，可以解决

flex

• 将 container 设置为弹性布局，container 变为了 flex 容器，子元素 center、left、right 变为了 flex 项目
• 设置 left 的 order 属性来调整位置，默认为0，值越小越靠前
• left 和 right 设置为固定宽度，使用 width 或 flex-basis
• 让 center 自动填充剩余空间，使用 flex-grow（默认为0） 或 flex 即可

<style media="screen">
    .container {
        display: flex;
    }

    .container>div {
        height: 200px;
    }
    .center {
        background: aqua;
        flex-grow:1;
    }
    .left {
        flex-basis: 200px;
        background: lightblue;
        order: -1;
    }
    .right {
        flex-basis: 150px;
        background: lightgreen;
    }
</style>

双飞翼布局

html结构

• center 是鸟的身体，left 和 right 是鸟的翅膀，先把 center 放好，再将翅膀移动到合适的位置

<div class="container">
    <div class="center">
        <div class="inner">中间自适应</div>
    </div>
    <div class="left">左侧固定宽度</div>
    <div class="right">右侧固定宽度</div>
</div>

• 把之前给 container 的 padding 加给 center，并把它转换成 IE 盒模型
• 再给 left 和 right margin-left 即可