CSS 5種佈局方案

以下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>複製程式碼