css 高度固定，两边宽300px，中间自适应

css

• 
• flex  当宽度不是固定 也可行

// html
<div class="container">
      <div class="left"></div>
      <div class="middle">flex</div>
      <div class="right"></div>
</div>

// css 

   <style>
      .container {
        display: flex;
        height: 200px;
      }

      .left,
      .right {
        width: 300px;
        background-color: antiquewhite;
      }

      .middle {
        flex: 1;
      }
   </style>

• position 

<div class="container">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

// css

    <style>
      .container {
        position: relative;
        height: 200px;
      }

      .left,
      .right {
        position: absolute;
        width: 300px;
        top: 0;
        bottom: 0;
        background: #ccc;
      }

      .left {
        left: 0;
      }

      .right {
        right: 0;
      }

      .middle {
        margin: 0 300px;
      }
    </style>

•  grid

 

    <style>
      .container {
        display: grid;
        grid-template-columns: 300px auto 300px;
        height: 200px;
      }

      .left,
      .right {
        background: #eee;
      }

    </style>