三栏布局之自适应布局

在前端的面试中，经常会遇到的一个问题就是“怎么实现左右两端宽度固定，中间自适应”。下面我总结了五种常见的方式实现。

先写下全局的 style 吧

<style>        
html * {            
    padding: 0;            
    margin: 0;        
}                
.layout {            
    margin-top: 10px;
}                
.layout article div 
{            
    min-height: 100px;       
}    
</style>

方法一：通过浮动

缺点：当 center 块的内容太长，就会使得 center 部分溢出；解决方式就是创建 BFC

<section class="layout float">
        <style>
            .layout.float .left {
                width: 300px;
                float: left;
                background: yellow;
            }
            .layout.float .right {
                width: 300px;
                float: right;
                background: blue;
            }
            .layout.float .center {
                background: red; 
           }        
        </style>
       <article class="left-center-right"> 
           <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h2>我的float布局解决方案</h2>
            </div>
        </article>
    </section>

方法二：通过 absoluted 布局

缺点：绝对定位脱离文档流

<section class="layout absoluted">
        <style>
            .layout.absoluted .left-center-right>div {
                position: absolute;
            }
            .layout.absoluted .left {
                left: 0px;
                width: 300px;
                background: yellow;
            }                        
            .layout.absoluted .center {
                left: 300px;
                right: 300px;
                background: red;
            } 
             .layout.absoluted .right {
                right: 0px;
                width: 300px;
                background: blue;
            }
        </style>        
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>我是absoluted布局解决方案</h2>
            </div>
            <div class="right"></div>
        </article>
    </section>

方法三：使用 CSS3 的 flex 布局

<section class="layout flexb">
        <style>
            .layout.flexb {
                margin-top: 120px;
            }
            .layout.flexb .left-center-right {
                display: flex;
            }
            .layout.flexb .left {
                width: 300px;
                background: yellow;
            }            
            .layout.flexb .center {
                flex: 1;
                background: red;
            }           
            .layout.flexb .right {
                width: 300px;
                background: blue;
            } 
       </style>
       <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>我是flex解决方案</h2>
            </div>
            <div class="right"></div>
        </article>
    </section>

方法四：使用 table 布局

缺点：table 布局影响性能，一小局部的变化，都会导致 DOM 重新渲染

<section class="layout table">
        <style>
            .layout.table .left-center-right {
                display: table;
                width: 100%;
                height: 100px;
            }          
            .layout.table .left-center-right>div {
                display: table-cell;
            }            
            .layout.table .left {
                width: 300px;
                background: yellow;
            }             
           .layout.table .center {
                background: red;
            }             
           .layout.table .right {
                width: 300px;
                background: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>我是Table解决方案</h2>
            </div>
            <div class="right"></div>
        </article>
    </section>

方法五：使用 CSS3 的 grid 布局

缺点：浏览器的兼容性欠佳

<section class="layout grid">
        <style>
            .layout.grid .left-center-right {
                display: grid;
                width: 100%;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
            }           
            .layout.grid .left {
                background: yellow;
            } 
            .layout.grid .center {
                background: red;
            }              
          .layout.grid .right {
                background: blue; 
           } 
       </style>
       <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>我是grid解决方案</h2>
            </div>
            <div class="right"></div>
        </article>    </section>

效果图如下：

如果对你有帮助的话，点个赞让我知道呗~