CSS:布局篇_兩邊頂寬中間自適應(yīng)(圣杯布局&雙飛翼布局)

圣杯布局以及雙飛翼布局解決的是兩邊頂寬中間自適應(yīng)的三欄布局，且中間欄優(yōu)先渲染。

圣杯布局實(shí)現(xiàn)思路:

用一個(gè)div作為容器依次包住中，左，右。中以width:100%作為主體，中左右div均以浮動(dòng)float：left，左右均以margin負(fù)邊距實(shí)現(xiàn)三欄并排。左右div使用相對(duì)定位，讓各自的視圖向相應(yīng)方向偏移自身大小。

圣杯布局

html結(jié)構(gòu)

    <div class="header">
        <h4>header</h4>
    </div>
    <div class="container">
        <div class="middle">
            <h4>middle</h4>
        </div>
        <div class="left">
            <h4>left</h4>
            
        </div>
        <div class="right">
            <h4>right</h4>
        </div>
    </div>
    <div class="footer">
            <h4>footer</h4>
    </div>

html結(jié)構(gòu)

css樣式

    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{min-width: 700px;}
        .header,.footer{
            background: #ff9999;text-align: center;height: 50px;line-height: 50px;
        }
        .middle,.left,.right{
            position: relative;
            float: left;
            min-height: 130px;
            line-height: 130px;
        }
        .container{
            padding: 0 220px 0 200px;
            overflow: hidden;
            position: relative;
        }
        .left{
            margin-left:-100%;
            left: -200px;
            background: #99ffff;
            width: 200px;
        }
        .right{
            background: #ccff99;
            width: 220px;
            margin-right:-220px;
        }
        .middle{
            width: 100%;
            background: #ccffff;
            word-break: break-all;
        }
        .footer{
        }
    </style>

css樣式

雙飛翼布局

雙飛翼布局實(shí)現(xiàn)思路:

中以width：100%作為主體。中左右div均以浮動(dòng)float:left排列。左右div均以margin負(fù)邊距，讓三欄并列，中（主體）div使用margin-left，margin-right壓縮主體寬度。

html結(jié)構(gòu)

    <!--頭部-->
    <div class="header">
        <h4>header</h4>
    </div>
    <!--主體-->
    <div class="main">
        <div class="main-inner">
            <h4>main</h4>
        </div>
    </div>
    <!--左側(cè)-->
    <div class="sub">
        <h4>sub</h4>
    </div>
    <!-- 右側(cè) -->
    <div class="extra">
        <h4>extra</h4>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <h4>footer</h4>
    </div>

html結(jié)構(gòu)

css樣式

    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{min-width: 700px;}
        .header,.footer{
            border: 1px solid #333;
            background: #f99;
            text-align: center;
            height: 50px;
            line-height: 50px;
        }
        .sub,.main,.extra{
            float: left;min-height: 130px;
            line-height: 130px;text-align: center;
        }
        .sub{
            width: 200px;background: #9ff;margin-left: -100%;
        }
        .extra{
            width: 220px;background: #cff;margin-left: -220px;
        }
        .main{
            width: 100%;
        }
        .main .main-inner{
            background: #cf9;
            min-height: 130px;
            margin-left: 200px;
            margin-right: 220px;
        }
        .footer{
            clear: both;
        }
    </style>

css樣式

posted @ 2019-09-11 15:43 潤(rùn)潤(rùn)潤(rùn) 閱讀(362) 評(píng)論(0) 收藏舉報(bào)

刷新頁面返回頂部

潤(rùn)潤(rùn)潤(rùn)

CSS:布局篇_兩邊頂寬中間自適應(yīng)(圣杯布局&雙飛翼布局)

CSS:布局篇_兩邊頂寬中間自適應(yīng)(圣杯布局&雙飛翼布局)

圣杯布局

html結(jié)構(gòu)

css樣式

雙飛翼布局

html結(jié)構(gòu)

css樣式

公告