三栏布局 五中解决方式

前言

有些事情总是要面对的，那我就拿这一篇开始我的记录生涯吧

正文

三栏布局

经典的上中下，左中右，三栏，两栏都属于这类问题，下面我们看看这如何实现（其中，面试官如果让你写代码，你的HTML结构可以使用语义化标签）

样式

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

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

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

 <section class="flex">
    <style>
        .flex{
            //上边的position布局脱离了文档流
            margin-top: 120px;
        }
        .flex .left-right-center{
            display: flex;
        }
        .flex .left{
            width: 300px;
            background: red;
        }
        .flex .right{
            width: 300px;
            background: green;
        }
        .flex .center{
            flex: 1;
            background: yellow;
        }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="center">
            <h1>flex布局</h1>
        </div>
        <div class="right"></div>
    </article>
</section>

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

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

看完代码，下来就介绍一下优缺点

• float 兼容性好，但是需要清除浮动，且脱离文档流了
• position 跟float一样
• flex 解决了脱离文档流的问题，兼容稍微有些差
• table 兼容性好，但现在不推荐使用了，
• grid 下一代标准，代码量少，实现简单

那么去掉高度后该如何选择了，其中flex和table表现良好，grid需要调整，但是剩下的就不能使用了。 面向未来编程，所以，楼主也在学习flex和grid，简单强大