三栏自适应布局

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>
复制代码

而后效果图是这样滴

一样也是其中一栏高度变化那么另外两栏高度也会同步变化滴

以上。