css常見雙欄和三欄佈局

時間 2020-05-05

標籤 css 常見佈局欄目 CSS 简体版

原文原文鏈接

左側固定右側自適應

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>左側固定右側自適應</title>
</head>
<style>
    /*方法1*/
    /* 一、將左側div浮動，右側div設置margin-left */
    .outer {
        overflow: hidden;
        border: 1px solid red;
    }

    .sidebar {
        float: left;
        width: 200px;
        height: 150px;
        background: #BCE8F1;
    }

    .content {
        margin-left: 200px;
        height: 100px;
        background: #F0AD4E;
    }

    /*方法2*/
    /* 二、固定區採用絕對定位，自適應區設置margin */
    .outer2 {
        position: relative;
        height: 150px;
        border: 1px solid red;
    }

    .sidebar2 {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 100%;
        background: #BCE8F1;
    }

    .content2 {
        margin-left: 200px;
        height: 100px;
        background: #F0AD4E;
    }

    /*方法3*/
    /* table佈局 */
    .outer3 {
        display: table;
        width: 100%;
        border: 1px solid red;
    }

    .sidebar3 {
        display: table-cell;
        width: 200px;
        height: 150px;
        background: #BCE8F1;
    }

    .content3 {
        display: table-cell;
        height: 100px;
        background: #F0AD4E;
    }

    /*方法4*/
    /* 雙float + calc()計算屬性 */
    .outer4 {
        overflow: hidden;
        border: 1px solid red;
    }

    .sidebar4 {
        float: left;
        width: 200px;
        height: 150px;
        background: #BCE8F1;
    }

    .content4 {
        float: left;
        width: calc(100% - 200px);
        height: 100px;
        background: #F0AD4E;
    }

    /*方法5*/
    /* float + BFC方法 */
    .outer6 {
        overflow: auto;
        border: 1px solid red;
    }

    .sidebar6 {
        float: left;
        width: 200px;
        height: 150px;
        background: #BCE8F1;
    }

    .content6 {
        overflow: auto;
        height: 100px;
        background: #F0AD4E;
    }

    /*方法6*/
    /* flex */
    .outer7 {
        display: flex;
        border: 1px solid red;
    }

    .sidebar7 {
        flex: 0 0 200px;
        /* width: 200px; */
        height: 150px;
        background: #BCE8F1;
    }

    .content7 {
        flex: 1;
        height: 100px;
        background: #F0AD4E;
    }
</style>

<body>
    <div class="outer6">
        <div class="sidebar6">固定寬度區(sideBar)</div>
        <div class="content6">自適應區(content)</div>
    </div>
    <div class="footer">footer</div>
</body>

</html>

三欄佈局左右固定寬度中間自適應

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三欄佈局左右固定寬度中間自適應</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .layout article div{
            min-height: 100px;
        }
    </style>
</head>
<body>
    <section class="layout layout1">
        <style>
            .layout1 .left{
                float: left;
                width: 300px;
                background-color:red;
            }
            .layout1 .right{
                float: right;
                width: 300px;
                background-color:blue;
            }
            .layout1 .center{
                background-color: yellow;
            }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h1>浮動解決方案</h1>
                一、這是三欄佈局中間部分
                一、這是三欄佈局中間部分
                <br>缺點：須要清除浮動
                <br>優勢：兼容性好
            </div>
        </article>
    </section>
    <section class="layout layout2">
        <style>
            .layout2 .left-center-right>div{
                margin-top: 20px;
                position: absolute;
            }
            .layout2 .left{
                left: 0;
                width: 300px;
                background-color: red;
            }
            .layout2 .center{
                left: 300px;
                right: 300px;
                background-color: yellow;
            }
            .layout2 .right{
                right: 0;
                width: 300px;
                background-color: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>絕對定位解決方案</h2>
                一、這是三欄佈局中間部分
                一、這是三欄佈局中間部分
                <br>缺點：脫離文檔流
                <br>優勢：快捷
            </div>
            <div class="right"></div>
        </article>
    </section>

    <section class="layout layout3">
            <style>
                .layout3 .left-center-right{
                    display: flex;
                    margin-top: 200px;
                }
                .layout3 .left{
                    width: 300px;
                    background-color: red;
                }
                .layout3 .center{
                    flex:1;
                    background-color: yellow;
                }
                .layout3 .right{
                    width: 300px;
                    background-color: blue;
                }
            </style>
            <article class="left-center-right">
                <div class="left"></div>
                <div class="center">
                    <h2>flexbox解決方案</h2>
                    一、這是三欄佈局中間部分
                    一、這是三欄佈局中間部分
                    <br>完美
                </div>
                <div class="right"></div>
            </article>
        </section>

        <section class="layout layout4">
                <style>
                    .layout4 .left-center-right{
                        width: 100%;
                        display: table;
                        height: 100px;
                        margin-top: 50px;
                    }
                    .layout4 .left-center-right>div{
                        display: table-cell;
                    }
                    .layout4 .left{
                        width: 300px;
                        background-color: red;
                    }
                    .layout4 .center{
                        background-color: yellow;
                    }
                    .layout4 .right{
                        width: 300px;
                        background-color: blue;
                    }
                </style>
                <article class="left-center-right">
                    <div class="left"></div>
                    <div class="center">
                        <h2>表格佈局解決方案</h2>
                        一、這是三欄佈局中間部分
                        一、這是三欄佈局中間部分
                        <br>兼容性好
                        <br>缺點：高度跟着變
                    </div>
                    <div class="right"></div>
                </article>
            </section>
            去掉高度已知哪一個不適用：
            flex和table能用，會自動撐開
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。