圣杯布局
Posted 任小小
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了圣杯布局相关的知识，希望对你有一定的参考价值。
<!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%;
以上是关于圣杯布局的主要内容，如果未能解决你的问题，请参考以下文章