三列布局：中间固定 左右自适应（三种方式）

第一种：flex

     .container{
      display:flex
      }
       .left,
       .right {
            flex: 1;
        }

       .middle {
            width: 300px;
        }

    

第二种：grid

    .container {
            display: grid;
            grid-template-columns: auto 300px auto;
        }

第三种：float

 

      //如果是中间固定 就是 calc  两边固定用float
      .left {
          float: left;
          width: calc(50% - 50px); /* 左边自适应宽度 */
      }
      .minddle {
          float: left;
          width: 100px; /* 中间固定宽度 */
      }
      .right {
          float: left;
          width: calc(50% - 50px); /* 右边自适应宽度 */
      }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

一个人在夜里走了很久很久，，，，