[良い記事の共有] 究極の CSS レイアウト ソリューションの聖杯レイアウト (IE6 以降、最新のブラウザーと互換性あり)_html/css_WEB-ITnose

聖杯レイアウト -- 非常に優れた賢いレイアウト方法です。毎回見なければなりませんが、裏返すだけです

転載元: http://my.oschina.net/jsan/blog/368543

最終効果 :

左側栏固定宽度、右側自适应

html:

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

css:

.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>    </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%;    }

左、中央、右の 3 列アダプティブ

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：右rreee右に、左側に適応型html：

rreee

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*/}

finalコード：

rreee