首页 > 代码库 > CSS布局-圣杯布局
CSS布局-圣杯布局
圣杯布局
圣杯布局很完美（兼容所有浏览器，包括IE6），但是使用了相对定位，布局有局限性，宽度控制要改的地方也多。
第一种方法公用部分：
.lgyz, .lzrg, .lrzcg, .lcgrz, .lzcrg {margin:10px 0; min-width:400px;text-align: center;color:#ffffff; } .left {background-color: #4DBCB0; padding:20px 0;} .aside, .center, .right {background-color: #E35881;padding:20px 0; }
第二种方法都不考虑兼容IE8及以下。
左侧栏固定宽度，右侧自适应 ：
第一种写法：
<div class="lgyz"> <div class="left">主内容栏自适应宽度</div> <div class="aside">侧边栏固定宽度</div> </div>
.lgyz{zoom:1;overflow:hidden;padding-left:210px;} .lgyz .aside{float:left;width:200px;margin-left:-100%;position:relative;left:-210px;_left:0;} .lgyz .left{float:left;width:100%;}
第二种写法：
<div class="layout"> <aside class="layout__aside">侧边栏宽度固定</aside> <div class="layout__main">主内容栏宽度自适应</div> </div>
.layout:after {clear: both;content: " "; display: table;} .layout__aside, .layout__main {float: left;} .layout {padding-left: 210px;} .layout__main {width: 100%;} .layout__aside {width: 200px;margin-left: -210px;}
右侧栏固定宽度，左侧自适应 ：
第一种写法：
<div class="lzrg"> <div class="left">主内容栏自适应宽度</div> <div class="aside">侧边栏固定宽度</div> </div>
.lzrg{zoom:1;overflow:hidden;padding-right:210px;} .lzrg .aside{float:left;width:200px;margin-left:-200px;position:relative;right:-210px;} .lzrg .left{float:left;width:100%;}
第二种写法：
<div class="layout"> <div class="layout__main">主内容栏宽度自适应</div> <aside class="layout__aside">侧边栏宽度固定</aside> </div>
.layout:after{clear:both;content:" ";display:table;}
.layout{padding-right:210px;}
.layout__main{width:100%;float:left;}
.layout__aside{float:right;width:200px;margin-right:-210px;}
左右固定 中间自适应
第一种：
<div class="lrzcg"> <div class="left">主内容栏自适应宽度</div> <div class="center">侧边栏1固定宽度</div> <div class="right">侧边栏2固定宽度</div> </div>
.lrzcg{zoom:1;overflow:hidden;padding-left:210px;padding-right:210px;} .lrzcg .left{float:left;width:100%;} .lrzcg .center{float:left;width:200px;margin-left:-100%;position:relative;left:-210px;_left:210px;} .lrzcg .right{float:left;width:200px;margin-left:-200px;position:relative;right:-210px;}
第二种：
<div class="layout"> <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside> <div class="layout__main">主内容栏宽度自适应</div> <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside> </div>
.layout:after{clear:both;content:" ";display:table;}
.layout__aside,.layout__main{float:left;}
.layout{padding:0 210px;}
.layout__main{width:100%;}
.layout__aside{width:200px;}
.layout__aside--left{margin-left:-210px;}
.layout__aside--right{margin-right:-210px;float:right;}
第三种：
<div class="layout__main-wrapper"> <div class="layout__main">主内容栏宽度自适应</div> </div> <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside> <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside> <footer class="clear">底部</footer>
.clear{clear:both;}
.layout__main-wrapper,.layout__aside{float:left;}
.layout__main-wrapper{width:100%;}
.layout__main{margin:0 210px;}
.layout__aside{width:200px;}
.layout__aside--left{margin-left:-100%;}
.layout__aside--right{margin-left:-200px;}
都在左边，右侧自适应
第一种：
<div class="lcgrz"> <div class="left">主内容栏自适应宽度</div> <div class="center">侧边栏1固定宽度</div> <div class="right">侧边栏2固定宽度</div> </div>
.lcgrz{zoom:1;overflow:hidden;padding-left:420px;} .lcgrz .left{float:left;width:100%;} .lcgrz .center{float:left;width:200px;margin-left:-100%;position:relative;left:-420px;_left:0px;} .lcgrz .right{float:left;width:200px;margin-left:-100%;position:relative;left:-210px;_left:210px;}
第二种：
<div class="layout"> <aside class="layout__aside layout__aside--first">第1个侧边栏宽度固定</aside> <aside class="layout__aside layout__aside--second">第2个侧边栏宽度固定</aside> <div class="layout__main">主内容栏宽度自适应</div> </div>
.layout:after{clear:both;content:" ";display:table;}
.layout__aside,.layout__main{float:left;}
.layout{padding-left:420px;}
.layout__main{width:100%;}
.layout__aside{width:200px;}
.layout__aside--first{margin-left:-420px;}
.layout__aside--second{margin-left:-210px;}
都在右边，左侧自适应
第一种：
<div class="lzcrg"> <div class="left">主内容栏自适应宽度</div> <div class="center">侧边栏1固定宽度</div> <div class="right">侧边栏2固定宽度</div> </div>
.lzcrg{zoom:1;overflow:hidden;padding-right:420px;} .lzcrg .left{float:left;width:100%;} .lzcrg .center{float:left;width:200px;margin-left:-200px;position:relative;right:-210px;} .lzcrg .right{float:left;width:200px;margin-left:-200px;position:relative;right:-420px;}
第二种：
<div class="layout"> <div class="layout__main">主内容栏宽度自适应</div> <aside class="layout__aside layout__aside--first">第1个侧边栏宽度固定</aside> <aside class="layout__aside layout__aside--second">第2个侧边栏宽度固定</aside> </div>
.layout:after{clear:both;content:" ";display:table;}
.layout{padding-right:420px;}
.layout__main{width:100%;float:left;}
.layout__aside{width:200px;float:right;}
.layout__aside--first{margin-right:-210px;}
.layout__aside--second{margin-right:-420px;}
使用flex方法圣杯布局，每种布局做法的结果同上面一模一样，但是代码减少了很多，而且适用的场景更多
<div class="layout"> <aside class="layout__aside">侧边栏宽度固定</aside> <div class="layout__main">主内容栏宽度自适应</div> </div> <div class="layout"> <div class="layout__main">主内容栏宽度自适应</div> <aside class="layout__aside">侧边栏宽度固定</aside> </div> <div class="layout"> <aside class="layout__aside">左侧边栏宽度固定</aside> <div class="layout__main">主内容栏宽度自适应</div> <aside class="layout__aside">右侧边栏宽度固定</aside> </div> <div class="layout"> <aside class="layout__aside">第1个侧边栏宽度固定</aside> <aside class="layout__aside">第2个侧边栏宽度固定</aside> <div class="layout__main">主内容栏宽度自适应</div> </div> <div class="layout"> <div class="layout__main">主内容栏宽度自适应</div> <aside class="layout__aside">第1个侧边栏宽度固定</aside> <aside class="layout__aside">第2个侧边栏宽度固定</aside> </div>
.layout {margin:10px 0; min-width:400px;text-align: center;color:#ffffff; } .layout__main {background-color: #4DBCB0; padding:20px 0;} .layout__aside {background-color: #E35881;padding:20px 0; } .layout { display: flex;} .layout__main { flex: 1;} .layout__aside {width: 200px; } .layout > .layout__aside:not(:first-child), .layout > .layout__main:not(:first-child){ margin-left: 10px;}
CSS布局-圣杯布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。