三栏布局 html, css 5种

[h476564406]

一. display: flex

<style>
        .layout.flexbox .left-center-right {
            display: flex;
        }
        .layout.flexbox .left {
            width: 300px;
            background: red;
        }
        .layout.flexbox .center {
            /* 获得剩余可分配的空间 */
            flex: 1;
            background: yellow;
        }
        .layout.flexbox .right {
            width: 300px;
            background: blue;
        }
</style>

二. relative, absolute

<style>
        .left-center-right {
            position: relative;
        }
        .layout.absolute .left {
            position: absolute;
            left: 0;
            width: 300px;
            background: red;
        }
        .layout.absolute .right {
            position: absolute;
            right: 0;
            width: 300px;
            background: blue;
        }
        .layout.absolute .center {
            position: absolute;
            left: 300px;
            right: 300px;
            background: yellow;
        }
</style>

三. display: table, table-cell

<style>
        .layout.table .left-center-right {
            display: table;
        }
        .layout.table .left {
            display: table-cell;
            width: 300px;
            background: red;
        }

        .layout.table .center {
            display: table-cell;
            background: yellow;
        }

        .layout.table .right {
            display: table-cell;
            width: 300px;
            background: blue;
        }
</style>

四. display: grid

<style>
       .layout.grid .left-center-right {
           width: 100%;
           display: grid;
           /* 一行： 高度为150px */
           grid-template-rows: 150px;
           /*  3列： 300px auto 300px */
           grid-template-columns: 300px auto 300px;
       }
       .layout.float .left {
           background: red;
       }
       .layout.float .center {
           background: yellow;
       }
       .layout.float .right {
           background: blue;
       }
</style>

五. float

<style>
        .layout.float .left-right-center::after {
            display: block;
            clear: both;
            content: '';
        }

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

        .layout.float .center {
            background: yellow;
            margin-left: 300px;
            margin-right: 300px;
        }

        .layout.float .right {
            float: right;
            width: 300px;
            background: blue;
        }
    </style>

     <article class="left-right-center">
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="center">
                1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
            </div>
        </article>