三列布局

三列布局

• 网格

  <style>
      .grid{
          display: grid;
          grid-template-columns: 100px auto 100px;
          gap: 10px;
      }
      .item {
          background-color: cornflowerblue;
          display: grid;
          place-items: center;
      }
  </style>
  <div class="grid">
      <div class="item">1</div>
      <div class="item">1</div>
      <div class="item">1</div>
  </div>
  

• 弹性

  <style>
      .flex{
          display: flex;
      }
      .left, .right{
          flex: 1;
          border: 1px solid red;
      }
      .center{
          flex: 2;
          border: 1px solid red;
      }
  </style>
  <div class="flex">
      <div class="left">1</div>
      <div class="center">1</div>
      <div class="right">1</div>
  </div>
  

• 定位

  <style>
      .container{
          position: relative;
      }
      .left{
          position: absolute;
          top: 0;
          left: 0;
          width: 100px;
      }
      .right{
          position: absolute;
          top: 0;
          right: 0;
          width: 100px;
      }
      .center{
          position: absolute;
          left: 100px;
          right: 100px;
      }
      .container div{
          border: 1px solid red;
      }
  </style>
  <div class="container">
      <div class="left">1</div>
      <div class="center">1</div>
      <div class="right">1</div>
  </div>
  

其它的不考虑，记住这三种就行了