CSS:佈局篇_兩邊頂寬中間自適應(聖盃佈局&雙飛翼佈局)

CSS:佈局篇_兩邊頂寬中間自適應(聖盃佈局&雙飛翼佈局)

聖盃佈局以及雙飛翼佈局解決的是兩邊頂寬中間自適應的三欄佈局，且中間欄優先渲染。

聖盃佈局實現思路:

用一個div做爲容器依次包住中，左，右。中以width:100%做爲主體，中左右div均以浮動float：left，左右均以margin負邊距實現三欄並排。左右div使用相對定位，讓各自的視圖向相應方向偏移自身大小。

聖盃佈局

html結構

 

    <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結構

 

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樣式

雙飛翼佈局

雙飛翼佈局實現思路:

中以width：100%做爲主體。中左右div均以浮動float:left排列。左右div均以margin負邊距，讓三欄並列，中（主體）div使用margin-left，margin-right壓縮主體寬度。

html結構

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

html結構

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樣式