三栏自适应布局解决方案

• 一道面试题引发的思考：
• 三栏布局，两侧固定宽度，中间自适应解决方案！我一共总结了 6种解决方案。我们一起来看看吧。

　　其中只有 flex布局 和 表格布局 能够自适应高度。 各种方案的取舍还要看 具体需求和情况 没有绝对。

　　一：自浮动布局

　　　　优点：兼容性好些，简单。

　　　　缺点：浮动有破坏性，浮动的设计之初是 为了实现文字环绕效果，所以不能高度自适应。

　　

<style>
        html *{
            padding:0;
            margin:0;
        }
        .loyaot-float article div{
            min-height: 100px;
        }
        .loyaot-float .left{
            float: left;
            width: 300px;
            background: red;
        }
        .loyaot-float .right{
            float: right;
            width: 300px;
            background: yellow;
        }
        .loyaot-float .center{
            background: #a4ffff;
        }
    </style>

<section class="loyaot-float">
        <article>
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <p>我是自浮动布局</p>
                <p>我是自浮动布局</p>
                <p>我是自浮动布局</p>
                <p>我是自浮动布局</p>
            </div>
        </article>
    </section>

　　二. 浮动 + margin负边距

　　　　优点：兼容性好些，用的网站多些。

　　　　缺点：有点难以理解。不能高度自适应

<style>
        html *{
            padding: 0;
            margin: 0;
        }
        .loyaot-float{
            min-height: 100px;
        }
        .loyaot-float article{
            height: 100px;
        }
        .wrapper{
            float: left;
            width: 100%;
        }
        .center{
            margin: 0 210px;
            background: yellow;
        }
        .left, .right{
            float: left;
            width: 210px;
            height: 100%;
        }
        .left {
            margin-left: -100%;
            background: red;
        }
        .right {
            margin-left: -210px;
            background: blue;
        }
    </style>

<section class="loyaot-float">
        <article>
            <div class="wrapper">
                <div class="center">
                    <p>我是float+margin负边距布局</p>
                    <p>我是float+margin负边距布局</p>
                    <p>我是float+margin负边距布局</p>
                    <p>我是float+margin负边距布局</p>
                </div>
            </div>
            <div class="left"></div>
            <div class="right"></div>
        </article>
    </section>

　　三. 绝对定位

　　　　优点：简单，好理解，兼容性好。

　　　　缺点：不能自适应高度

<style>
        html *{
            padding: 0;
            margin: 0;
        }
        .loyaot-float{
            min-height: 100px;
        }
        .loyaot-float article{
            height: 100px;
        }
        .left, .right {
            position: absolute;
            top: 0;
            width: 210px;
            height: 100px;
        }
        .left{
            left: 0;
            background:red;
        }
        .right{
            right: 0;
            background: blue;
        }
        .center{
            position: absolute;
            top:0;
            left: 210px;
            right:210px;
            background: yellow;
        }
    </style>

    <section class="loyaot-float">
        <article>
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <p>我是绝对定位布局</p>
                <p>我是绝对定位布局</p>
                <p>我是绝对定位布局</p>
                <p>我是绝对定位布局</p>
            </div>
        </article>
    </section>

　　四：display:table-cell 表格布局

　　　　优点：ie8+支持 ，代码简单，能够自适应高度。

　　　　缺点：不能兼容ie6/7

<style>
        html *{
            padding: 0;
            margin: 0;
        }
        .loyaot-float{
            min-height: 100px;
        }
        .loyaot-float article{
            display: table;
            width: 100%;
            height: 100px;
        }
        .loyaot-float article>div{
            display: table-cell;
        }
        .left, .right {
            width: 210px;
            height: 100px;
        }
        .left{
            background: red;
        }
        .right{
            background: blue;
        }
        .center{
            background: yellow;
        }
    </style>

<section class="loyaot-float">
        <article>
            <div class="left"></div>
            <div class="center">
                <p>我是表格布局</p>
                <p>我是表格布局</p>
                <p>我是表格布局</p>
                <p>我是表格布局</p>
            </div>
            <div class="right"></div>
        </article>
    </section>

　　五 ：flex布局

　　　　优点：简单，自适应高度。

　　　　缺点：兼容不了低版本ie浏览器 

<style>
        html *{
            padding: 0;
            margin: 0;
        }
        .loyaot-float{
            min-height: 100px;
        }
        .loyaot-float article{
            display: flex;
            width: 100%;
        }
        .left{
            width: 210px;
            background: red;
        }
        .right{
            width: 210px;
            background: blue;
        }
        .center{
            flex: 1;
            background: yellow;
        }
    </style>


    <section class="loyaot-float">
        <article>
            <div class="left"></div>
            <div class="center">
                <p>我是flex布局</p>
                <p>我是flex布局</p>
                <p>我是flex布局</p>
                <p>我是flex布局</p>
            </div>
            <div class="right"></div>
        </article>
    </section>

　　六：网格布局

　　　　优点：简单，css3最新特性。

　　　　缺点：不支持自适应高度。

<style>
        html *{
            padding: 0;
            margin: 0;
        }
        .left{
            background: red;
        }
        .right{
            background: blue;
        }
        .center{
            background: yellow;
        }
        .loyaot-float article{
            display: grid;
            width: 100%;
            grid-template-rows:100px;
            grid-template-columns:210px auto 210px;
        }
    </style>


<section class="loyaot-float">
        <article>
            <div class="left"></div>
            <div class="center">
                <p>我是grid布局</p>
                <p>我是grid布局</p>
                <p>我是grid布局</p>
                <p>我是grid布局</p>
            </div>
            <div class="right"></div>
        </article>
    </section>

grid