三列布局是指左右两列定宽，中间自适应。最终效果如下：

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;
}