css三栏布局

三栏布局，高度已知，左右两栏固定，中间栏自适应

方案1： float实现，优点：兼容性好；缺点：脱离文档流，DOM节点顺序错误

<section class="float">
    <style>
        .float .left {
            float: left;
            width: 300px;
            background: green;
        }
        .float .center {
            background: yellow;
        }
        .float .right {
            width: 300px;
            float: right;
            background: red;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </article>
</section>

方案2：absolute实现，优点：快捷；缺点：脱离文档流

<section class="absolute">
    <style>
        .absolute article > div {
            position: absolute;
        }
        .absolute .left {
            left: 0;
            width: 300px;
            background: green;
        }
        .absolute .center {
            left: 300px;
            right: 300px;
            background: yellow;
        }
        .absolute .right {  
            width: 300px;
            right: 0;
            background: red;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article>
</section>

方案3：margin负值实现，优点：兼容性好，缺点：节点顺序错误，需要多一层额外的div,出问题难以排查

<section class="margin">
    <style>
        .absolute .center {
            width:100%;
            float:left;
        }
        .absolute .main {
            margin: 0 100px;
            background:yellow;
        }
        .absolute .left {
            float:left;
            width: 300px;
            margin-left: -100%;
            background: green;
        }
        
        .absolute .right {  
            width: 300px;
            float:right;
            margin: -300px;
            background: red;
        }
    </style>
    <article class="left-center-right">
        <div class="center">
            <div class="main"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </article>
</section>

方案4：flex实现，优点：新布局方式，解决以上两种布局的缺陷；缺点：兼容性差

<section class="flex">
    <style>
        .flex {
            margin-top: 110px;
        }
        .flex .left-center-right {
            display: flex;
        }
        .flex .left {
            width: 300px;
            background: green;
        }
        .flex .center {
            flex:1;
            background: yellow;
        }
        .flex .right {
            width: 300px;
            background: red;
        }
    </style>
    <arctile class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </arctile>
</section>

方案5：table实现，优点：兼容性好、快捷；缺点：单元格限制，当某个单元格高度调整时，其他单元格也会调整

<section class="table">
    <style>
        .table .left-center-right {
            width: 100%;
            height: 100px;
            display: table;
        }
        .table .left-center-right div {
            display: table-cell;
        }
        .table .left {
            width: 300px;
            background: green;
        }
        .table .center {
            background: yellow;
        }
        .table .right {
            width: 300px;
            background: red;
        }
    </style>
    <arctile class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </arctile>
</section>

方案6： grid实现，将网格布局标准化，将复杂问题简单化；缺点：兼容性差

<section class="grid">
    <style>
        .grid .left-center-right {
            display: grid;
            width: 100%;
            grid-template-rows : 100px;
            grid-template-columns : 300px auto 300px;
        }
        .grid .left {
            background: green;
        }
        .grid .center {
            background: yellow;
        }
        .grid .right {
            background: red;
        }
    </style>
    <arctile class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </arctile>
</section>