CSS 实现三栏布局的6种方案

需求： 实现一个左右固定，中间自适应的三栏布局有几种方案？ 答：

1. flex

   原理：父 display:flex；中间flex:1；左右宽度固定；

       .wrapper4{
           width: 100vw;
           height: 5vh;
           background: palevioletred;
           
           display: flex;        
       }
       .wrapper4-center{
           flex: 1;
           background: red;
       }
       .wrapper4-left{
           width: 100px;
           background: silver;
       }
       .wrapper4-right{
           width: 200px;
           background: sandybrown;
       }
   
   

2. grid

   原理：父 display:grid; grid-template-columns:设置左右宽度

   .grid{
       display: grid;
       grid-template-columns: 200px auto 120px;
       
       width: 100vw;
       height: 10vh;
       background: pink;
       
   }
   .grid>.grid-left{
       background:salmon;
   }
   .grid>.grid-center{
       background:red;
   }
   .grid>.grid-right{
       background:salmon;
   }
   

3. table

   原理：父使用display：table； 中间使用table-cell；左右宽度固定；

   /* table */
   .table-wrapper{
       width: 100vw;
       height: 10vh;
       background: fuchsia;
       
       display: table;
   
   }
   
   .table-center{
       width: 100%;
       display: table-cell;
       background-color: aquamarine;
   }
   .table-left, .table-right{
       background-color: bisque;
       width: 200px;
   }
   

4. position：

   原理：父：relative; 左右 absolute; 中间使用margin左移动;

/* position */
 .wrapper5{
     width: 100vw;
     height: 5vh;
     background: rgb(119, 105, 219);
     
     position: relative;
    
 }
 .wrapper5-center{
     background: rgb(166, 188, 36);
     margin-left: 100px;
 }

 .wrapper5-left{
     width: 100px;
     background: rgb(167, 10, 10);
     
     position: absolute;
     left: 0;
     top: 0;
 } 
 .wrapper5-right{
     width: 200px;
     background: rgb(34, 165, 73);
     
     position: absolute;
     right: 0;
     top: 0;
 }

5. float 方案一

   原理：中间元素dom排序上放在最后；左右固定宽度；左右使用float；中间使用margin

    <div class="wrapper3">
        <div class="wrapper3-left">三栏布局float方案： 固定宽度 + float</div>
        <div class="wrapper3-right">右边floatright否则右边会被挤下去</div>
        <div class="wrapper3-center">警告：center的dom 节点要放在元素的最后 左右margin</div>
    </div>
   

   .wrapper3{
        background-color: blanchedalmond;
        width: 100vw;
        height: 10vh;
     }
    .wrapper3-left{
        width: 200px;
        background: palevioletred;
        
        float: left;
        
   
    }
    .wrapper3-right{
        width: 120px;
        background: cadetblue;
        
        float:right;
       
   
    }
    .wrapper3-center{
        margin-left: 100px;
        margin-right: 120px;
        background: violet;
    }
   
   

6. float 方案二：

   原理：在center外层包一层div。全都float，右边margin -宽度

      <div class="wrapper6">
         <div class="wrapper6-main-box">
             <div class="wrapper6-main">中间自适应</div>
         </div>
   
       <div class="wrapper6-left">左边固定宽度</div>
       <div class="wrapper6-right">右边固定宽度</div>
     </div>
     
     
     .wrapper6{
         width: 100vw;
         background: rgb(86, 81, 120);
         height: 15vh;
     }
     .wrapper6-main-box{  // 外层元素 float left
         width: 100%;
         float: left;
     }
     .wrapper6-main{
         background-color: aqua;
         margin: 0 200px;
     }
   
     .wrapper6-left{
         width: 200px;
         background: rgb(79, 43, 131);
         
         float: left;
         margin-left: -100%;
   
     }
   
     .wrapper6-right{
         width: 200px;
         background: rgb(246, 102, 6);
         
         float: left;
         margin-left: -200px;
     }