假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应

港控/mmm° 2022-05-11 03:00 92阅读 0赞

解决方案：

<!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>test1</title>
        <style media="screen">
          .left {
            width: 300px;
            background-color: blue;
            height: 200px;
            text-align: center;
          }
          .center {
            background-color: #ccc;
            height: 200px;
            text-align: center;
          }
          .right {
            text-align: center;
            width: 300px;
            background-color: red;
            height: 200px;
          }
        </style>
      </head>
      <body>
        
        <section class="sec1">
          <style media="screen">
            .sec1 .left {
              float: left;
            }
            .sec1 .right {
              float: right;
            }
          </style>
          <div class="left">left</div>
          <div class="right">right</div>
          <div class="center">浮动 ： center--center--center--</div>
        </section>
    
        
        <section class="sec2">
          <style media="screen">
          .sec2 {
            margin-top: 20px;
            position: relative;
          }
          .sec2 > div {
            position: absolute;
          }
          .sec2 .left {
            left: 0;
          }
          .sec2 .right {
            right: 0;
          }
          .sec2 .center {
            left: 300px;
            right: 300px;
          }
          </style>
          <div class="left">left</div>
          <div class="center">绝对定位 ： center--center--center--</div>
          <div class="right">right</div>
        </section>
    
        
        <section class="sec3">
          <style media="screen">
            .sec3 {
              margin-top: 240px;
              display: flex;
            }
            .sec3 .center {
              flex: 1;
            }
          </style>
          <div class="left">left</div>
          <div class="center">flex : center--center--center--</div>
          <div class="right">right</div>
        </section>
    
        
        <section class="sec4">
          <style media="screen">
            .sec4 {
              margin-top: 20px;
              display: table;
              width: 100%
            }
            .sec4 > div {
              display: table-cell;
            }
          </style>
          <div class="left">left</div>
          <div class="center">表格布局 : center--center--center--</div>
          <div class="right">right</div>
        </section>
    
        
        
        <section class="sec5">
          <style media="screen">
            .sec5 {
              margin-top: 20px;
              display: grid;
              width: 100%;
              /* grid-template-rows: 100px; */
              grid-template-columns: 300px auto 300px;
            }
          </style>
          <div class="left">left</div>
          <div class="center">网格布局 : center--center--center--</div>
          <div class="right">right</div>
        </section>
      </body>
    </html>