三栏布局是一个比较常见的布局，在高度固定的情况下，左右各留出300px，中间自适应，可以有以下的几种写法。
比较常见的有浮动布局和绝对定位布局，但是flex布局现在也非常普遍了，Grid布局可能兼容性不太好，但也不失为一种方法。
因为下面的css代码中有许多的相同的地方，我们先我们先设置一些基本的css代码，用作左中右的颜色识别和高度的设置：
基本的css代码：
*{margin: 0; padding: 0;} .layout { margin-top: 20px; } .layout article div { min-height: 100px; } .left { background: red; } .right { background: green; } .center { background: #ddd; }
浮动布局（主要利用的就是浮动脱离文档流的特点）：
html代码：
<section class="layout float"> <article class="left-center-right"> <div class="left"></div> <div class="right"></div> <div class="center"> <h2>浮动解决方案</h2> <p>这是三栏布局的中间部分这是三栏布局的中间部分</p> </div> </article>
</section>
css代码:
.layout.float .left { float: left; width: 300px; } .layout.float .right { float: right; width: 300px; } .layout.float .center { margin: 0 300px 0 300px; }
绝对定位布局（与浮动定位布局的原理基本相同）：
html代码：
<article class="left-center-right"> <div class="left"></div> <div class="right"></div> <div class="center"> <h2>绝对定位解决方案</h2> <p>这是三栏布局的中间部分这是三栏布局的中间部分</p> </div> </article>
css代码:
.layout.absolute .left { position: absolute; left: 0; width: 300px; } .layout.absolute .center { margin: 0 300px 0 300px; } .layout.absolute .right { position: absolute; right: 0; width: 300px; }
弹性盒子布局：
这里用到了flex的一个简写方式。
flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。 --阮一峰《Flex布局教程》
flex-grow定义项目的放大比例。
如果flex-grow为1，那么它将占据项目的剩余空间，如果有许多个子项目，则他们将等分剩余项目空间。如果不清楚的，建议去看阮一峰老师的Flex布局教程，里面讲的很清晰。
html代码：
<section class="layout flex"> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>flex解决方案</h2> <p>这是三栏布局的中间部分这是三栏布局的中间部分</p> </div> <div class="right"></div> </article> </section>
css代码：
.layout.flex .left-center-right{ display: flex; } .layout.flex .left { width: 300px; } .layout.flex .center { flex: 1; } .layout.flex .right { width: 300px; }
Grid布局（兼容性较差）
grid布局则可以直接控制二维布局，直接设定横向和纵向的布局方式。
html代码：
<section class="layout grid"> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>Grid布局解决方案</h2> <p>这是三栏布局的中间部分这是三栏布局的中间部分</p> </div> <div class="right"></div> </article> </section>
css代码：
.layout.grid .left-center-right{ display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 300px auto 300px; }
