三栏布局就是左中右，左右两边固定，中间自适应。
1. 绝对定位
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
body {
padding: ;
margin: ;
}
/* 绝对定位 */
.left, .right {
position: absolute;
top: ;
}
.left {
background: red;
width: 200px;
left: ;
}
.middle {
background: blue;
margin: 200px;
}
.right {
background: green;
width: 200px;
right: ;
}2. flex
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
body {
display: flex;
padding: ;
margin: ;
}
.left {
background: blue;
flex: 200px ;
}
.middle {
background: red;
flex: ;
}
.right {
background: green;
flex: 200px;
}3. 双飞翼
<div class="middle">
<div class="inner">
中间
</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
body {
padding: ;
margin: ;
}
.left, .middle, .right {
float: left;
}
.left {
background: red;
width: 200px;
margin-left: -%; /* 使left移到middle的左边 */
}
.right {
background: red;
width: 200px;
margin-left: -200px; /* 使right移到middle的右边 */
}
.middle {
background: blue;
width: %;
}
.inner {
margin: 200px;
}4. 浮动
<div class="left">左边</div>
<div class="right">右边</div>
<div class="middle">中间</div>
.left {
float: left;
background: blue;
width: 200px;
}
.middle {
margin: 200px;
background: red;
width: %;
}
.right {
float: right;
background: green;
width: 200px;
}参考：https://segmentfault.com/a/1190000007729716