左右固定，中间自适应的三栏式布局五种写法左右固定，中间自适应的三栏

三栏式布局是工作中常用的布局方式，三栏式布局有多种写法，作为前端开发，对布局的了解也是一项基本功，
下面是整理的五种三栏式布局的基本写法
公共样式

//清除默认样式 html *{padding: 0; margin:0; } //layout公共样式 .layout{margin-top:20px; } .layout div{min-height: 100px; }

1. 浮动布局（浮动会是文档脱离文档流，需要清浮动）

.layout.float .left{float: left; width: 300px; background: red; } .layout.float .right{float: right; width: 300px; background: blue; } .layout.float .center{background: yellow; }浮动布局这是中间部分

2. 绝对定位布局（绝对定位也会脱离文档流）

.layout.absolute .con>div{position: absolute; } .layout.absolute .left{left:0; width: 300px; background: red; } .layout.absolute .right{right:0; width: 300px; background: blue; } .layout.absolute .center{background: yellow; left: 300px; right: 300px; }绝对定位布局这是中间部分

3. flex布局（css3的新语法，pc兼容性问题，常用于移动端，中间被内容撑开高度时，左右两边的高度也能同中间保持一致）

.layout.flexbox{margin-top: 140px; } .layout.flexbox .con{display: flex; } .layout.flexbox .left{width: 300px; background: red; } .layout.flexbox .right{width: 300px; background: blue; } .layout.flexbox .center{background: yellow; flex: 1; }flex布局这是中间部分

4. 表格布局（中间被内容撑开高度时，左右两边的高度也能同中间保持一致）

.layout.table .con{width: 100%; display: table; height: 100px; } .layout.table .con>div{display: table-cell; } .layout.table .left{width: 300px; background: red; } .layout.table .right{width: 300px; background: blue; } .layout.table .center{background: yellow; }表格布局这是中间部分

5.网格布局（新语法，代码量少）

.layout.grid .con{display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 300px auto 300px; } .layout.grid .left{background: red; } .layout.grid .right{background: blue; } .layout.grid .center{background: yellow; }网格布局这是中间部分

【左右固定，中间自适应的三栏式布局五种写法】转载于:https://www.cnblogs.com/leiting/p/8195966.html