三栏布局那些事儿

中间宽度自适应，两边宽度固定的三栏布局，是前端页面开发中极为常见网站布局方式。博主认为，一名合格的前端工程师老是会将之熟记于心。
如下是博主总结的五种三栏布局的经常使用方法，与你们分享。

正文

---

一、浮动布局

浮动布局是一种极易理解，也是初学者首先想到的布局方式。仅借用CSS的float属性便可轻松实现。
html代码

<div class="left">Left</div> <div class="right">Right</div> <div class="main">Main</div> <!-- 注意其前后顺序，main必须在left和right后-->

CSS代码

.left{ background-color: #ffd0d0; width: 160px; height: 400px; float: left; } .right{ background-color: #a9ffa9; width: 160px; height: 400px; float: right; } .main{ background-color: #ffffa9; height: 500px; width: auto; }

注意html代码中三栏的前后顺序
浮动布局的优势是简单，但也有很多缺点：

1. 主要内容main在文档后侧，因此直到最后才能渲染主要内容。
2. left和right实际上是浮动到了main上面，也就是说，当主栏高度大于侧栏高度时（这种状况极为常见），main下面的部份内容会和页面同宽。很少说，下面一张图赛过千言万语。

二、绝对定位布局

仅两个侧栏使用绝对定位，脱离文档流，始终在页面的两边。而后，为了不主栏和侧栏内容重叠，给主栏设置外边距，其数值等于侧栏宽度。
html代码

<div class="main">Main</div> <div class="right">Right</div> <div class="left">Left</div>

CSS代码

.main{ background-color: #ffffa9; height: 500px; width: auto; margin: 0 160px; /* min-width: 200px; */ } .left{ background-color:#ffd0d0; width:160px; height: 400px; position: absolute; top: 0; left: 0; } .right{ background-color: #a9ffa9; width: 160px; height: 400px; position: absolute; top: 0; right: 0; }

用绝对定位布局思路简单清晰，但有一个明显的缺点，就是若是中间栏有最小宽度限制，当浏览器 缩小至必定程度时，会出现层叠现象。以下图

三、圣杯布局

最为经典的圣杯布局，其思路主要是借用浮动分别将左栏和右栏浮动至主栏的两边；而后用外层容器的内边距将主栏两边“推”向中间必定宽度，给左栏和右栏腾出空间；最后借助相对定位 将左栏和右栏定位至合适位置便可。
话很少说，先上代码：
html代码

<div class="container"> <div class="main">Main</div> <div class="left">Left</div> <div class="right">Right</div> </div>

CSS代码

.container{ /*向中间“推”主栏，给两个侧栏 腾地儿*/ padding: 0 160px; } .main{ background-color: #ffffa9; width: 100%; /*主栏宽度设置为100%，自适应*/ height: 500px; float: left; } .left{ background-color:#ffd0d0; width: 160px; height: 500px; position: relative; float: left; /*左侧外边距为-100%，也就是主栏的宽度，使.left上浮，且左移至main的左边*/ margin-left:-100%; /*.left继续左移，直到屏幕的最左边，此时.left正好占据.container左边padding的160px*/ left: -160px; } .right{ background-color: #a9ffa9; width: 160px; height: 400px; float: right; /*上移至容器最右边*/ margin-right: -160px; position: relative; }

注意，main（也就是主栏）在最前面，两个侧栏尾随其后，固然左栏和右栏谁在前谁在后都是能够的。这样布局的好处是：主栏在文档的前面，因此重要的东西会优先渲染。

四、双飞翼布局

双飞翼布局是对圣杯布局的优化，以增长一个div为代价换取去掉了相对布局。
“双飞翼”，顾名思义，是在main外围增长一个div（.main-outer），而后给.main-outer设置左右内边距（或者给main设置外边距，效果相同），像两个翅膀。两侧栏上浮后恰好位于.main-outer的内边距处，所以内边距的值需等于侧栏的宽度.
html代码

<div class="container"> <div class="main-outer"> <div class="main">Main</div> </div> <div class="left">Left</div> <div class="right">Right</div> </div>

CSS代码

.main-outer{ box-sizing: border-box; padding: 0 160px; width: 100%; float: left; } .main{ background-color: #ffffa9; height: 500px; } .left{ background-color:#ffd0d0; width:160px; height: 400px; float: left; margin-left:-100%; } .right{ background-color: #a9ffa9; width: 160px; height: 400px; float: left; margin-left: -160px; } 

主栏内容一样在文档的开头部分，优先渲染。双飞翼布局不需使用相对定位，相对来讲更易理解。

五、使用flex布局

是时候拿出终极武器了，flex布局。万能的flex啊，赐我以能量吧！

html代码

<div class="container"> <div class="left">Left</div> <div class="main">Main</div> <div class="right">Right</div> </div>

CSS代码

.container{ display: flex; /*如下是默认属性，不写也行，为便于理解，博主在此将其罗列出来 flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; */ } .main{ background-color: #ffffa9; height: 500px; width:100%; } .left{ background-color:#ffd0d0; width:160px; height: 400px; } .right{ background-color: #a9ffa9; width: 160px; height: 400px; }

上面代码有一个缺陷，就是在html代码中，left，main，right的相对位置不能改变，这就致使了main中的主要内容不能被优先渲染。那怎么办呢？(≧∀≦)ゞ

万能的flex固然有办法咯！
给.mian.left.right三个类中添加以下代码：

.left{ order: 1; } .main{ order: 2; } .right{ order: 3; }

搞定！***以上五种方法各有优缺点，根据实际状况挑选适合项目的便可，大的项目的尽可能使用main内容可优先渲染的。