三列布局是指左右两列定宽，中间自适应。最终效果如下：
HTML：
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
公共CSS：
.container {
width: 400px;
height: 200px;
}
.left{
width: 100px;
height: 200px;
background-color:orange;
}
.right{
width: 100px;
height: 200px;
background-color:orange;
}
.center {
height: 200px;
background-color: #d0e4fe;
}
一. float 浮动
方法一：float left + float right
由于设置 float: right; 不会影响浮动元素左侧元素的布局，所以首先需要将 HTML 结构调整如下：
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
然后给左列开启左浮动，右列开始右浮动。
.left {
float: left;
}
.right {
float: right;
}
二. position 定位
方法二：absolute + calc()
.left {
position: absolute;
left: 0;
top: 0;
}
.center {
width: calc(100% - 200px);
margin-left: 100px;
margin-right: 100px;
}
.right {
position: absolute;
right: 0;
bottom: 0;
}
三. flex 布局
方法三：flex:1;
.container {
display: flex;
}
.center {
flex: 1;
}
四. grid 布局
方案四：grid
.container {
display: grid;
gird-template-columns: 100px 1fr 100px;
}
