往期推荐：
「CSS布局之全屏布局」
「CSS布局（二）之多列布局」
「CSS布局（三）之等分布局」
「CSS布局（四）之文本布局」
前言
圣杯布局和双飞翼布局
圣杯布局和双飞翼布局和布局也算是一种很经典的布局了吧，都是有左中右三列组成的，左右两列固定，中间自适应，高度固定且相等。接下来让我们看看是怎么实现的把。
<div class="layout"> <div class="layout-left"></div> <div class="layout-right"></div> <div class="layout-center"></div></div>
复制代码
通过 float 和 margin/pading 实现
大体上圣杯布局和双飞翼布局是一样的，但细节上还是有不一样的地方。
相同点：
通过中间列自适应，来完成。
通过 float 来使左右两列向左向右浮动。
不同点：
注意：因为浮动节点如果高于前面或平级的非浮动节点，会导致浮动节点下沉。所以在编写 HTML 的时候，要把中间列挪到右列节点后面。
圣杯布局
.layout { width: 1000px; height: 800px; padding: 0 200px; .layout-left { float: left; width: 200px; height: 100%; margin-left: -200px; background-color: crimson; } .layout-right { float: right; width: 200px; height: 100%; margin-right: -200px; background-color: yellow; } .layout-center { height: 100%; background-color: blue; }}
复制代码
双飞翼布局
.layout { width: 1000px; height: 800px; .layout-left { float: left; width: 200px; height: 100%; background-color: crimson; } .layout-right { float: right; width: 200px; height: 100%; background-color: yellow; } .layout-center { margin: 0 200px; height: 100%; background-color: blue; }}
复制代码
通过 flex 实现
通过 flex 实现还是非常简单的，中间列设置 flex：1 即可自适应。
<div class="layout"> <div class="layout-left"></div> <div class="layout-center"></div> <div class="layout-right"></div></div>
复制代码
.layout { display: flex; width: 1000px; height: 800px; .layout-left { width: 200px; background-color: crimson; } .layout-right { width: 200px; background-color: yellow; } .layout-center { flex: 1; background-color: blue; }}
复制代码
好，今天就到这里了，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！
评论