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

巴特西

CSS:布局篇_两边顶宽中间自适应(圣杯布局&双飞翼布局)

CSS:布局篇_两边顶宽中间自适应(圣杯布局&双飞翼布局)

圣杯布局

html结构

css样式

双飞翼布局

html结构

css样式

最新文章

热门文章