三栏布局，中间自适应，左右固定实现方法

Posted 2020-06-14

方法一：浮动

     <div class="container">
          <div class="content">hello</div>
          <div class="left"></div>
          <div class="right"></div>  
     </div>

 

     <style>

          .left{

               float:left;
               width: 200px;
               height: 300px;
               background: red;
          }
          .right{
               float: right;
               width: 200px;
               height: 300px;
               background: green;
          }
          .content{
               width: 100%;
               height: 300px;
               background: blue;
          }

     </style>

 

方法二：定位

       .left{
               width: 200px;
               height: 300px;
               background: red;
               position: absolute;
               left: 0;
               top: 0;
          }
          .right{
               width: 200px;
               height: 300px;
               background: green；
               position: absolute;
               right: 0;
               top: 0;
          }
          .content{
               width: 100%;
               height: 300px;
               background: blue;

               margin：0 200px；
          }

          .container{

               position:relative;

          }

 

方法三：display：box

          .left{

               width: 200px;
               height: 300px;
               background: red;
          }
          .right{

               width：200px；
               height: 300px;
               background: green;
          }
          .content{
               box-flex:1
               height: 300px;
               background: blue;
          }

          .container{

               display:box;

          }