CSS：三列布局

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

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