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>

 

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>

双飞翼布局

双飞翼布局实现思路:

中以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>

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>