本文总结了实现三栏布局的几种常用方法，效果如下：
image
其中，左右分别为100px，中间自适应。
1. 行内块级元素 —— inline-block
1.1 行内块级元素 & 负边距
html 代码:
<div class="wrap-inline-3">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
css 代码:
/*三列布局 -- 行内块级元素 & 负边距*/
.wrap-inline-3 {
font-size: 0;
padding-left: 100px;
padding-right: 200px;
}
.wrap-inline-3 div{
display: inline-block;
vertical-align: top;
height: 20vh;
font-size: 12px;
}
.wrap-inline-3 .left {
width: 100px;
margin-left: -100px;
background-color: aliceblue;
}
.wrap-inline-3 .center {
width: 100%;
background-color: antiquewhite
}
.wrap-inline-3 .right {
width: 200px;
margin-right: -200px;
background-color: aquamarine;
}
特点： 宽度缩到极窄时，中间部分宽度缩为0，内容会被右侧覆盖。
1.2 行内块级元素 & calc 计算
html 代码:
<div class="wrap-inline-calc-3">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
css 代码:
/*三列布局 -- 行内块级元素 & calc 计算*/
.wrap-inline-calc-3 {
font-size: 0;
width: 100%;
}
.wrap-inline-calc-3 div{
display: inline-block;
vertical-align: top;
height: 20vh;
font-size: 12px;
}
.wrap-inline-calc-3 .left {
width: 100px;
background-color: aliceblue;
}
.wrap-inline-calc-3 .center {
width: calc(100% - 300px);
background-color: antiquewhite
}
.wrap-inline-calc-3 .right {
width: 200px;
background-color: aquamarine;
}
特点： 宽度缩到极窄时，中间部分宽度缩为0，内容仍会显示，右侧会被挤到下方。
2. 绝对定位
html 代码:
<div class="wrap-absolute">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
css 代码:
/*三列布局: 绝对定位*/
.wrap-absolute div{
height: 20vh;
}
.wrap-absolute .left {
width: 100px;
position: absolute;
left: 0;
background-color: aliceblue;
}
.wrap-absolute .center {
position: absolute;
left: 100px;
right: 200px;
background-color: antiquewhite;
}
.wrap-absolute .right {
width: 200px;
position: absolute;
right: 0;
background-color: aquamarine;
}
特点： 宽度变得极窄后，三列会发生覆盖。
3. 浮动
3.1 浮动 + 边距
html 代码:
<div class="wrap-float-3">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
css 代码:
/*三列布局：浮动 + 边距*/
.wrap-float-3 div {
height: 20vh;
}
.wrap-float-3 .left {
float: left;
width: 100px;
background-color: aliceblue;
}
.wrap-float-3 .center {
margin: 0 100px 0 100px;
background-color: antiquewhite;
}
.wrap-float-3 .right {
float: right;
width: 200px;
background-color: aquamarine;
}
特点： 宽度缩到极窄，右侧会被挤到下一行。
3.2 圣杯布局：浮动 + 负边距 + 相对定位
html 代码:
<div class="wrap-float-shengbei">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
css 代码:
/* 圣杯布局: 浮动 + 负边距 + 相对定位 */
.wrap-float-shengbei {
height: 20vh;
padding-left: 100px;
padding-right: 200px;
}
.wrap-float-shengbei div {
float: left;
height: 20vh;
}
.wrap-float-shengbei .center {
width: 100%;
background-color: antiquewhite;
}
.wrap-float-shengbei .left {
width: 100px;
background-color: aliceblue;
margin-left: -100%;
right: 100px;
position: relative;
}
.wrap-float-shengbei .right {
width: 200px;
margin-right: -200px;
background-color: aquamarine;
}
特点： 浏览器优先解析和显示中间部分，但父容器宽度不断变窄时，虽然中间部分会优先显示，但布局会乱。
3.3 双飞翼布局: 浮动 + 负边距 + 中间元素包一层父容器
html 代码:
<div class="wrap-float-shuangfeiyi">
<div class="center-wrap">
<div class="center">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
css 代码:
/* 双飞翼布局: 浮动 + 负边距 + 中间元素包一层父容器 */
.wrap-float-shuangfeiyi {
height: 20vh;
}
.wrap-float-shuangfeiyi div {
height: 20vh;
}
.wrap-float-shuangfeiyi .center-wrap {
float: left;
width: 100%;
}
.wrap-float-shuangfeiyi .center-wrap .center {
background-color: antiquewhite;
margin-left: 100px;
margin-right: 200px;
}
.wrap-float-shuangfeiyi .left {
float: left;
width: 100px;
background-color: aliceblue;
margin-left: -100%;
}
.wrap-float-shuangfeiyi .right {
float: left;
width: 200px;
margin-left: -200px;
background-color: aquamarine;
}
特点： 宽度逐渐缩小时，会不断缩小中间元素宽度，直至缩为0，剩余两列会发生覆盖。
4. 弹性盒模型：flex
html 代码:
<div class="wrap-flex">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
css 代码:
/*三列布局: 弹性盒模型*/
.wrap-flex {
display: flex;
}
.wrap-flex div{
height: 20vh;
}
.wrap-flex .left {
width: 100px;
background-color: aliceblue;
}
.wrap-flex .center {
flex: 1;
background-color: antiquewhite;
}
.wrap-flex .right {
width: 200px;
background-color: aquamarine;
}
特点： 宽度变得极窄后，左右两边会自适应变窄。
5. 表格：table
html 代码:
<div class="wrap-table">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
css 代码:
/*三列布局: 表格*/
.wrap-table {
display: table;
}
.wrap-table div{
height: 20vh;
display: table-cell;
}
.wrap-table .left {
width: 100px;
background-color: aliceblue;
}
.wrap-table .center {
background-color: antiquewhite;
}
.wrap-table .right {
width: 200px;
background-color: aquamarine;
}
特点： 宽度变得极窄后，左右两边会自适应变窄。
6. 栅格：grid
html 代码:
<div class="wrap-grid">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
css 代码:
/*三列布局: 表格*/
.wrap-grid {
display: grid;
grid-template-columns: 100px auto 100px;
}
.wrap-grid div{
height: 20vh;
display: table-cell;
}
.wrap-grid .left {
background-color: aliceblue;
}
.wrap-grid .center {
background-color: antiquewhite;
}
.wrap-grid .right {
background-color: aquamarine;
}
特点： 不会变形，宽度只会缩到保持不变形的最窄，但兼容性不好。
以上几种方法，calc 、table 、flex 、grid 多少会有些兼容性问题，使用哪种可在了解清楚兼容性后，具体情况具体分析。
