方法一：两边使用float + 中间使用margin

方法二：两边使用absolute + 中间使用margin

方法三：flex 布局

方法四：grid 布局

方法一：相关HTML代码【两边使用float + 中间使用margin】

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main">123</div>
</div>

方法一：相关CSS代码【两边使用float + 中间使用margin】

    .container{
      width: 400px;
      height: 100px;
      border: 1px solid #000;
    }
    .left, .right, .main{
      height: 100px;
    }
    .left {
      width: 100px;
      float: left;
      background-color: aliceblue;
    }
    .right{
      width: 100px;
      float: right;
      background-color: blanchedalmond;
    }
    .main{
      margin: 0 100px;
      background-color: aqua;
    }

方法二：相关HTML代码【两边使用absolute + 中间使用margin】

  <div class="container">
    <div class="left"></div>
    <div class="main">123</div>
    <div class="right"></div>
  </div>

方法二：相关CSS代码【两边使用absolute + 中间使用margin】

    .container{
      width: 400px;
      height: 100px;
      border: 1px solid #000;
      position: relative;
    }
    .left, .right, .main{
      height: 100px;
    }
    .left {
      width: 100px;
      background-color: aliceblue;
      position: absolute;
      left: 0;
      top: 0;
    }
    .right{
      width: 100px;
      background-color: blanchedalmond;
      position: absolute;
      right:0;
      top: 0;
    }
    .main{
      margin: 0 100px;
      background-color: aqua;
    }

方法三：相关HTML代码【flex 布局】

  <div class="container">
    <div class="left"></div>
    <div class="main">123</div>
    <div class="right"></div>
  </div>

方法三：相关CSS代码【flex 布局】

    .container{
      width: 400px;
      height: 100px;
      border: 1px solid #000;
      display: flex;
    }
    .left, .right, .main{
      height: 100px;
    }
    .left {
      width: 100px;
      background-color: aliceblue;
      
    }
    .right{
      width: 100px;
      background-color: blanchedalmond;
      
    }
    .main{
      flex: 1;
      background-color: aqua;
    }

方法四：相关HTML代码【grid 布局】

  <div class="container">
    <div class="left"></div>
    <div class="main">123</div>
    <div class="right"></div>
  </div>

方法四：相关CSS代码【grid 布局】

    .container{
      width: 400px;
      height: 100px;
      border: 1px solid #000;
      display: grid;
      grid-template-columns: 100px auto 100px;
    }
    .left, .right, .main{
      height: 100px;
    }
    .left {
      background-color: aliceblue;
    }
    .right{
      background-color: blanchedalmond;
    }
    .main{
      background-color: aqua;
    }

结果展示： 

其他

【两边使用float， 中间使用负margin 的方法比较复杂】

【table布局，性能低，易引发回流和重绘，放弃】

【方法一到四宽度均会自适应，不需要设置width:100%】