三欄自適應佈局

1.使用flex進行自適應佈局

css

.outer{
             display: flex;
         }
         .center{
             flex:1; 
             background-color: blue;
         }
         .right,.left{
            height: 200px;
            width: 10%;
            background-color: aqua;
         }
複製代碼

dom

<div class="outer">
                <div class="left"></div>  
                <div class="center"></div>    
                <div class="right"></div>                    
        </div>
複製代碼

其中一欄高度變化，則另外兩欄高度也會變化

2.table佈局實現三欄自適應

css

.outer{
             width: 100%;
             display: table;
         }
         .outer>div{
             display: table-cell;
         }
         .center{
            height: 200px;
            background-color: blue;
         }
         .right,.left{
            height: 200px;
            width: 10%;
            background-color: aqua;
         } 
複製代碼

dom

<div class="outer">
                <div class="left"></div>  
                <div class="center"></div>    
                <div class="right"></div>                    
        </div>
複製代碼

高度變化另外兩欄高度也同時變化

3.gird實現三欄自適應佈局 css

.outer{
             width: 100%;
             display: grid;
             grid-template-columns: 0.25fr auto 0.25fr;
             /* grid-template-rows: 100px; */
         }
         .right,.left{      
             height: 200px;        
            background-color: aqua;
         }  
         .center{
            background-color: blue;
         }
複製代碼

dom

<div class="outer">
                <div class="left"></div>  
                <div class="center"></div>    
                <div class="right"></div>                    
        </div>
複製代碼

而後效果圖是這樣滴

一樣也是其中一欄高度變化那麼另外兩欄高度也會同步變化滴

以上。