三栏布局的5中方式

要求：高度固定，左边和右边宽度为300px，中间自适应

公共样式

<style>
        html * {
            margin: 0;
            padding: 0;
        }

        .clear {
            clear: both;
            height: 20px;
        }
        .layout article div{
            min-height: 100px;
            line-height: 100px;
            text-align: center;
        }
    </style>

1.浮动布局

<section class='layout float'>
        <style>
            .layout.float article div {
                min-height: 100px;
            }

            .float .left {
                width: 300px;
                float: left;
                background-color: red;
            }

            .float .right {
                width: 300px;
                float: right;
                background-color: red;
            }

            .float .center {
                background-color: yellow;
            }

            /* 坑：div布局一定要按照 left/right/center这个写法。如果left/center/right/就达不到效果 */
        </style>
        <article class="left-center-right">
            <div class="left">我是左边的div</div>
            <div class="right">我是右边的div</div>
            <div class="center">浮动解决方案</div>
            <p class="clear"></p>
        </article>
    </section>

2.定位

<section class='layout position'>
        <style>

            .layout.position article div {
                min-height: 100px;
            }

            .position .left-center-right {
                position: relative;
            }

            .position .left {
                width: 300px;
                position: absolute;
                left: 0;
                background-color: red;
            }

            .position .center {
                position: absolute;
                left: 300px;
                right: 300px;
                background-color: yellow;
            }

            .position .right {
                width: 300px;
                position: absolute;
                right: 0;
                background-color: red;
            }
        </style>
        <article class='left-center-right'>
            <div class="left">我是左边的div</div>
            <div class="center">决定定位解决方案</div>
            <div class="right">我是右边的div</div>
        </article>
    </section>

3 .flexbox

 <section class='layout flexbox'>
        <style>
            .flexbox{
                margin-top:140px;
            }
            .flexbox .left-center-right{
                display: flex;
            }
            .flexbox .left {
                width: 300px;
                background-color: red;
            }

            .flexbox .center {
                flex:1;
                background-color: yellow;
            }

            .flexbox .right {
                width: 300px;
                background-color: red;
            }
        </style>
        <article class='left-center-right'>
            <div class="left">我是左边的div</div>
            <div class="center">flexbox解决方案</div>
            <div class="right">我是右边的div</div>
        </article>
    </section>

4.table cell

 <section class='layout table'>
        <style>
            .table{
                margin-top:20px;
            }
            .table .left-center-right{
                display: table;
                width: 100%;
            }
            .table .left-center-right>div{
                display: table-cell;
            }
            .table .left{
                width: 300px;
                background-color: red;
            }
            .table .center{
              
                background-color: yellow;
            }
            .table .right{
                width: 300px;
                background-color: red;
            }
        </style>
        <article class="left-center-right">
            <div class="left">我是左边的div</div>
            <div class="center">表格解决方案</div>
            <div class="right">我是右边的div</div>
        </article>
    </section>

5.gird

<section class='layout gird'>
        <style>
            .gird{
                margin-top:20px;
            }
            .gird .left-center-right{
                display: grid;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
                width: 100%;
            }
            .gird .left{
                width: 300px;
                background-color: red;
            }
            .gird .center{
              
                background-color: yellow;
            }
            .gird .right{
                width: 300px;
                background-color: red;
            }
        </style>
        <article class="left-center-right">
            <div class="left">我是左边的div</div>
            <div class="center">九宫格解决方案</div>
            <div class="right">我是右边的div</div>
        </article>
    </section>