Maison >interface Web >tutoriel HTML >[ 好文分享 ] CSS布局终极方案之圣杯布局（兼容IE6+，现代浏览器）_html/css_WEB-ITnose
[ 好文分享 ] CSS布局终极方案之圣杯布局（兼容IE6+，现代浏览器）_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:38:221248parcourir
圣杯布局--很好很巧妙的布局方式，每次都要翻看一下，干脆转过来
转自：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%; } 左中右 三栏自适应
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> </div> </div> <div class="bd-rgt"> <div class="main"> <p>主内容栏自适应宽度</p> </div> <div class="aside"> <p>侧边栏固定宽度</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> Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Html做三个平台原生APP啦_html/css_WEB-ITnoseArticle suivant：求前端大神帮帮忙，我把网页缩小后出现图中上的问题，IE上又没问题啊，360就有问题，求教。_html/css_WEB-ITnose