[ 好文分享 ] CSS布局终极方案之圣杯布局（兼容IE6+，现代浏览器）_html/css

[ 好文分享 ] CSS布局终极方案之圣杯布局（兼容IE6+，现代浏览器）_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:38:22

原创

1408人浏览过

圣杯布局--很好很巧妙的布局方式，每次都要翻看一下，干脆转过来

转自：http://my.oschina.net/jsan/blog/368543

最终效果：

左侧栏固定宽度，右侧自适应

html:

<div class="bd-lft">    <div class="main">        <p>主内容栏自适应宽度</p>    </div>     <div class="aside">        <p>侧边栏固定宽度</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>    </div></div>

登录后复制

css:

Calliper 文档对比神器

文档内容对比神器

查看详情

.bd-lft {    zoom:1;    overflow:hidden;    padding-left:210px;}.bd-lft .aside {    float:left;    width:200px;    margin-left:-100%; /*= -100%*/     position:relative;    left:-210px; /* = -parantNode.paddingLeft */    _left: 0; /*IE6 hack*/}.bd-lft .main {    float:left;    width:100%;}

登录后复制

右侧栏固定宽度，左侧自适应

html:

<div class="bd-rgt">    <div class="main">        <p>主内容栏自适应宽度</p>    </div>     <div class="aside">        <p>侧边栏固定宽度</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>    </div></div>

登录后复制

css:

.bd-rgt {        zoom:1;        overflow:hidden;        padding-right:210px;    }    .bd-rgt .aside {        float:left;        width:200px;        margin-left:-200px; /* = -this.width */         position:relative;        right:-210px; /* = -parantNode.paddingRight */    }    .bd-rgt .main {        float:left;        width:100%;    }

登录后复制

左中右三栏自适应

html:

<div class="bd-3-lr">    <div class="main">        <p>主内容栏自适应宽度</p>    </div>    <div class="aside-1">        <p>侧边栏1固定宽度</p>    </div>    <div class="aside-2">        <p>侧边栏2固定宽度</p>    </div></div>

登录后复制

css:

 .bd-3-lr {        zoom:1;        overflow:hidden;        padding-left:210px;        padding-right:210px;    }    .bd-3-lr .main {        float:left;        width:100%;    }    .bd-3-lr .aside-1 {        float: left;        width:200px;        margin-left: -100%;         position:relative;        left: -210px;        _left: 210px; /*IE6 hack*/    }    .bd-3-lr .aside-2 {        float: left;        width:200px;        margin-left: -200px;         position:relative;        right: -210px;    }

登录后复制

都在左边，右侧自适应

html:

<div class="bd-3-ll">    <div class="main">        <p>主内容栏自适应宽度</p>    </div>     <div class="aside-1">        <p>侧边栏1固定宽度</p>    </div>     <div class="aside-2">        <p>侧边栏2固定宽度</p>    </div></div>

登录后复制

css:

.bd-3-ll {    zoom:1;    overflow:hidden;    padding-left:420px;}.bd-3-ll .main {    float:left;    width:100%;}.bd-3-ll .aside-1 {    float: left;    width:200px;    margin-left: -100%;     position:relative;    left: -420px;    _left: 0px; /*IE6 hack*/}.bd-3-ll .aside-2 {    float: left;    width:200px;    margin-left: -100%;     position:relative;    left: -210px;    _left: 210px; /*IE6 hack*/}

登录后复制

都在右边，左侧自适应

html:

<div class="bd-3-rr">    <div class="main">        <p>主内容栏自适应宽度</p>    </div>     <div class="aside-1">        <p>侧边栏1固定宽度</p>    </div>     <div class="aside-2">        <p>侧边栏2固定宽度</p>    </div></div>

登录后复制

css:

.bd-3-rr {    zoom:1;    overflow:hidden;    padding-right:420px;}.bd-3-rr .main {    float:left;    width:100%;}.bd-3-rr .aside-1 {    float: left;    width:200px;    margin-left: -200px;     position:relative;    right: -210px;}.bd-3-rr .aside-2 {    float: left;    width:200px;    margin-left: -200px;     position:relative;    right: -420px;}

登录后复制

最终代码：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <title>圣杯布局</title>    <style type="text/css">    body {        background-color: #ffffff;        font-size: 14px;    }        #hd,    #ft {        padding: 20px 3px;        background-color: #cccccc;        text-align: center;    }        .bd-lft,    .bd-rgt,    .bd-3-lr,    .bd-3-ll,    .bd-3-rr {        margin: 10px 0;        min-width: 400px;    }        .main {        background-color: #03a9f4;        color: #ffffff;    }        .aside,    .aside-1,    .aside-2 {        background-color: #00bcd4;        color: #ffffff;    }        p {        margin: 0;        padding: 20px;        text-align: center;    }    /* 左侧栏固定宽度，右侧自适应 */        .bd-lft {        zoom: 1;        overflow: hidden;        padding-left: 210px;    }        .bd-lft .aside {        float: left;        width: 200px;        margin-left: -100%;        /*= -100%*/        position: relative;        left: -210px;        /* = -parantNode.paddingLeft */        _left: 0;        /*IE6 hack*/    }        .bd-lft .main {        float: left;        width: 100%;    }    /* 右侧栏固定宽度，左侧自适应 */        .bd-rgt {        zoom: 1;        overflow: hidden;        padding-right: 210px;    }        .bd-rgt .aside {        float: left;        width: 200px;        margin-left: -200px;        /* = -this.width */        position: relative;        right: -210px;        /* = -parantNode.paddingRight */    }        .bd-rgt .main {        float: left;        width: 100%;    }    /* 左中右 三栏自适应 */        .bd-3-lr {        zoom: 1;        overflow: hidden;        padding-left: 210px;        padding-right: 210px;    }        .bd-3-lr .main {        float: left;        width: 100%;    }        .bd-3-lr .aside-1 {        float: left;        width: 200px;        margin-left: -100%;        position: relative;        left: -210px;        _left: 210px;        /*IE6 hack*/    }        .bd-3-lr .aside-2 {        float: left;        width: 200px;        margin-left: -200px;        position: relative;        right: -210px;    }    /* 都在左边，右侧自适应 */        .bd-3-ll {        zoom: 1;        overflow: hidden;        padding-left: 420px;    }        .bd-3-ll .main {        float: left;        width: 100%;    }        .bd-3-ll .aside-1 {        float: left;        width: 200px;        margin-left: -100%;        position: relative;        left: -420px;        _left: 0px;        /*IE6 hack*/    }        .bd-3-ll .aside-2 {        float: left;        width: 200px;        margin-left: -100%;        position: relative;        left: -210px;        _left: 210px;        /*IE6 hack*/    }    /* 都在右边，左侧自适应 */        .bd-3-rr {        zoom: 1;        overflow: hidden;        padding-right: 420px;    }        .bd-3-rr .main {        float: left;        width: 100%;    }        .bd-3-rr .aside-1 {        float: left;        width: 200px;        margin-left: -200px;        position: relative;        right: -210px;    }        .bd-3-rr .aside-2 {        float: left;        width: 200px;        margin-left: -200px;        position: relative;        right: -420px;    }    </style></head><body>    <div id="hd">头部</div>    <div class="bd-lft">        <div class="main">            <p>主内容栏自适应宽度</p>        </div>        <div class="aside">            <p>侧边栏固定宽度</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>        </div>    </div>    <div class="bd-rgt">        <div class="main">            <p>主内容栏自适应宽度</p>        </div>        <div class="aside">            <p>侧边栏固定宽度</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>        </div>    </div>    <div class="bd-3-lr">        <div class="main">            <p>主内容栏自适应宽度</p>        </div>        <div class="aside-1">            <p>侧边栏1固定宽度</p>        </div>        <div class="aside-2">            <p>侧边栏2固定宽度</p>        </div>    </div>    <div class="bd-3-ll">        <div class="main">            <p>主内容栏自适应宽度</p>        </div>        <div class="aside-1">            <p>侧边栏1固定宽度</p>        </div>        <div class="aside-2">            <p>侧边栏2固定宽度</p>        </div>    </div>    <div class="bd-3-rr">        <div class="main">            <p>主内容栏自适应宽度</p>        </div>        <div class="aside-1">            <p>侧边栏1固定宽度</p>        </div>        <div class="aside-2">            <p>侧边栏2固定宽度</p>        </div>    </div>    <div id="ft">底部</div></body></html>

登录后复制