CSS三栏布局，左右栏宽度固定，中间栏占剩余宽度

效果图

1.float布局

<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>

css

      .left {
        float: left;
        width: 100px;
        background: red;
      }
      .right {
        float: right;
        width: 100px;
        background: red;
      }
      .center {
        background: blue;
      }

2.table布局

    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>

css

      .left { 
        min-width: 100px;
        background: red;
        display: table-cell;
      }
      .right { 
        min-width: 100px;
        background: red;
        display: table-cell;
      }
      .center {
        background: blue;
        display: table-cell;
        width:100%;
      }

3.grid布局

    <div class='grid-container'>
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
    </div>

css

      .grid-container {
        display: grid;
        grid-template-columns: 100px 1fr 100px;
      }
      .left,
      .right {
        background: red;
      }
      .center {
        background: blue;
      }

4.flex布局

5.position布局

   .left{
      position:absolute;
       width:100px;
       background:red;
       top:0;
       left:0
   }
   .center{
       position:absolute;
       top:0;
       left:100px;
       right:100px; 
       background:blue;
   }
   .right{
      position:absolute;
       width:100px;
       background:red;
       top:0;
       right:0
   }