1. 简介
三列布局应该是非常经典的一个布局，考虑下面这个问题，实现左中右三列，其中左右两列宽度已知为200px，中间宽度自适应。该如何实现？
2. 实现
这里我直接上代码，代码里面有详细的注释。逻辑很清楚，大家可以直接运行这段代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3-columns</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
margin-bottom: 10px;
}
</style>
</head>
<body>
<!--float实现三列布局-->
<!--优点：实现简单，兼容性好-->
<!--缺点：脱离文档流，另外需要注意清除浮动-->
<section class="float-3-columns">
<style>
.float-3-columns .left {
float: left;
width: 200px;
background: green;
}
.float-3-columns .right {
float: right;
width: 200px;
background: blue;
}
.float-3-columns .main {
background: red;
margin-left: 200px;
margin-right: 200px;
}
</style>
<article class="wrap">
<div class="left">left content</div>
<div class="right">right content</div>
<div class="main">
<p>main content</p>
<p>main content</p>
<p>main content</p>
</div>
</article>
</section>
<!--absolute实现三列布局-->
<!--优点：实现简单，兼容性好-->
<!--缺点：脱离文档流，影响很大-->
<section class="absolute-3-columns">
<style>
.absolute-3-columns .wrap {
position: relative;
}
.absolute-3-columns .left {
position: absolute;
left: 0;
background: green;
width: 200px;
}
/*如果main在right前必须要加top:0,main在right后则不需要*/
.absolute-3-columns .right {
position: absolute;
right: 0;
top: 0;
background: blue;
width:200px;
}
.absolute-3-columns .main {
background: red;
margin-left: 200px;
margin-right: 200px
}
</style>
<article class="wrap">
<div class="left">left content</div>
<div class="main">
<p>main content</p>
<p>main content</p>
<p>main content</p>
</div>
<div class="right">right content</div>
</article>
</section>
<!--flex实现三列布局-->
<!--优点：简单，适用性强，专门用于布局-->
<!--缺点：兼容性-->
<section class="flex-3-columns">
<style>
.flex-3-columns .wrap{
display: flex;
}
.flex-3-columns .left {
width: 200px;
background: green;
}
.flex-3-columns .right {
width: 200px;
background: blue;
}
.flex-3-columns .main {
flex: 1;
background: red;
}
</style>
<article class="wrap">
<div class="left">left content</div>
<div class="main">
<p>main content</p>
<p>main content</p>
<p>main content</p>
</div>
<div class="right">right content</div>
</article>
</section>
<!--grid实现三列布局-->
<!--优点：简单，适用性强，专门用于布局-->
<!--缺点：兼容性-->
<section class="grid-3-columns">
<style>
.grid-3-columns .wrap {
display: grid;
grid-template-columns: 200px auto 200px;
}
.grid-3-columns .left {
background: green;
}
.grid-3-columns .right {
background: blue;
}
.grid-3-columns .main {
background: red;
}
</style>
<article class="wrap">
<div class="left">left content</div>
<div class="main">
<p>main content</p>
<p>main content</p>
<p>main content</p>
</div>
<div class="right">right content</div>
</article>
</section>
<!--table实现3列布局-->
<!--优点：兼容性好-->
<!--缺点：特性比较复杂-->
<section class="table-3-columns">
<style>
/*tableb默认宽度自适应，需要加width:100%*/
.table-3-columns .wrap {
display: table;
width: 100%;
}
.table-3-columns .left {
display: table-cell;
width: 200px;
background: green;
}
.table-3-columns .right {
display: table-cell;
width: 200px;
background: blue;
}
.table-3-columns .main {
display: table-cell;
background: red;
}
</style>
<article class="wrap">
<div class="left">left content</div>
<div class="main">
<p>main content</p>
<p>main content</p>
<p>main content</p>
</div>
<div class="right">right content</div>
</article>
</section>
</body>
</html>
效果如图所示：
有的同学会说，这里前面两个并不算标准的三列布局，因为三列不等高。嗯，如果要求等高且高度已知的话，我们只要给三列设置一个固定高度即可。但如果高度未知又想实现等高，则只能用flex，grid和table布局。
3. 拓展思考
如果是上中下三列布局，该如何实现呢？还有，针对float布局的缺点，有没有什么改进呢？
