圣杯布局

最新推荐文章于 2025-03-17 17:58:34 发布

abgo98357

最新推荐文章于 2025-03-17 17:58:34 发布

阅读量101

点赞数

原文链接：http://www.cnblogs.com/ryt103114/p/6196334.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8"/>
 <title>圣杯布局</title>
 <style type="text/css">
 body{
 background-color:#fff;
 font-size:14px;
 }
 #hd,#ft{
 padding:20px 3px;
 background-color:#ccc;
 text-align:center;
 }
 .bd-lft,.bd-rgt,.bd-3-ll,.bd-3-lr,.bd-3-rr{
 margin:10px 0;
 min-width:400px;
 }
 .main{
 background-color:#03a9f4;
 color:#fff;
 }
 .aside,.aside-1,.aside-2{
 background-color:#00bcd4;
 color:#fff;
 }
 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%;

 position:relative;
 left:-210px;
 _left:0;
 }
 .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;

 position:relative;
 right:-210px;
 }
 .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; 
 }
 .bd-3-ll .aside-2{
 float:left;
 width:200px;
 margin-left:-100%;

 position:relative;
 left:-210px;
 _left:210px;
 }

 /*都在右边，左侧自适应*/
 .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>

总的来说圣杯布局就是：加入有三个divABC，BC是包含在A里面的两个并排的div，给定A，padding-left:B的宽度，然后给定B，width:宽度值，position:relative;right:BC的边距，_right:-BC的边距，margin-right-100%，float:left;然后给定C：postiton:relative,width:100%;

转载于:https://www.cnblogs.com/ryt103114/p/6196334.html