CSS 5种布局方案

334 阅读2分钟

以下5种布局方案均为两边固定中间自适应。

浮动布局

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

绝对定位布局

<section>
    <style>
        .absolute>div {
            position: absolute;
        }
        .absolute .left {
            left: 0;
            width: 300px;
            background-color: greenyellow;
        }
        .absolute .right {
            right: 0;
            width: 300px;
            background-color: greenyellow;
        }
        .absolute .center {
            left: 300px;
            right: 300px;
            background-color: yellow;
        }
    </style>
    <article class="absolute">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h1>绝对定位布局</h1>
        </div>
    </article>
</section>

flex布局

    <section>
    <style>
        .flexbox {
            display: flex;
        }
        .flexbox .left {
            width: 300px;
            background-color: greenyellow;
        }
        .flexbox .right {
            width: 300px;
            background-color: greenyellow;
        }
        .flexbox .center {
            flex: 1;
            background-color: yellow;
        }
    </style>
    <article class="flexbox">
        <div class="left"></div>
        <div class="center">
            <h1>flex布局</h1>
        </div>
        <div class="right"></div>
    </article>
</section>

表格布局

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

grid网格布局

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