三栏模板范例（相对定位、绝对定位）

今天有朋友问我，怎么做一个这样的blog皮肤：三栏；左右都固定宽度，中间宽度随分辨率变化（自适应）。我之前帮人调整blog皮肤的时候，也遇到这个问题，但没找解决办法。这次也就借机会找找看了，重点就在position:absolute;（绝对定位）上：

<div style="width:200px;margin:0 auto;height:400px;background:#bbb;position:absolute;left:0px;">左边固定</div>
<div style="width:100px;margin:0 auto;height:400px;background:#ccc;position:absolute;right:0px;">右边固定</div>
<div style="width:100%;margin:0 auto; height:400px;background:#aaa;">中间%</div>

中间内的层要加padding:0 101px 0 201px;

如果倒过来，想要中间固定，两边自适应咋办？

<div style="width:50%;margin:0 auto;height:400px;background:#bbb;position:absolute;left:0;padding-right:105px;">左边%</div>
<div style="width:50%;margin:0 auto;height:400px;background:#ddd;position:absolute;right:0;padding-left:105px;">右边%</div>
<div style="position:realtive;"><div style="width:200px;margin:0 auto; height:400px;background:#aaa;position:absolute;left:50%;margin-left:-100px;">中间固定</div></div>

这里3个div都设置了position:absolute;，并且中间固定层因为居中问题，必须嵌套在position:realtive;相对定位层里。而中间固定宽度的margin-left:-100px;的100为width宽度的一半值。

这样就可以分别实现两种需要自适应的三栏模式了。其它左或右模板需要的，或要四栏的自己扩展哈！这里到此结束。

写在2008年8月11日

写这个是因为BoBlog论坛的版主Marshal同志今早在和我喊郁闷，我就看到某帖子，后来想起我一个老日志，然后就写了下面这个不改层的css，是内容自适应宽度的。其缺陷是必须固定侧栏每块的高度，除非在最后一个；否则会影响下面一个块的top值。想接着弄不自适应的CSS三栏，忽然纳闷没法居中；因为其中一个侧栏是浮动的，也就是绝对定位，无论多大分辨率都跟着top等值跑，不会跟着中间层走。没辙，CSS也不是十分万能的；还是喊上div一起吧。

下午补充，我错了。只想浮动侧栏没想浮动中间栏；所以做不出固定内容的。这是看BoBlog论坛的阴鬼火版主的回复所得，复制完代码面壁去。

自适应的代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>摇曳铃丹 YYLD.net</title>
<style type="text/css">
body{
margin:0 auto;
}
#all{
margin:0 auto;
padding:0;
width:100%;
}
#main{
width:100%;
margin:0 auto;
height:400px;
background:#aaa;
}
#sb{
margin:0;
padding:0;
width:200px;
background:#aaaaaa;
}
.sbl1{
position:absolute;
left:0;
top:0;
height:100px;
background:#bbbbbb;
width:200px;
}
.sbl2{
position:absolute;
left:0;
top:105px;
height:200px;
background:#bbbbbb;
width:200px;
}
.sbl3{
position:absolute;
left:0;
top:310px;
height:400px;
background:#bbbbbb;
width:200px;
}
.sbr1{
position:absolute;
right:0;
top:0;
height:100px;
background:#bbbbbb;
width:200px;
}
.sbr2{
position:absolute;
right:0;
top:105px;
height:200px;
background:#bbbbbb;
width:200px;
}
.sbr3{
position:absolute;
right:0;
top:310px;
height:400px;
background:#bbbbbb;
width:200px;
}
.post{
padding:0 201px 0 201px;
}
</style>
</head>
<body>
<div id="all">
<div id="main">
<div class="post">中间内容</div>
</div>
<div id="sb">
<div class="sbl1">左侧内容1</div>
<div class="sbl2">左侧内容2</div>
<div class="sbl3">左侧内容3</div>
<div class="sbr1">右侧内容1</div>
<div class="sbr2">右侧内容2</div>
<div class="sbr3">右侧内容3</div>
</div>
</div>
</body>
</html>

固定内容代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
text-align:center;
}
#wrapper{
position:relative;
width:1003px;
margin:0 auto;
text-align:center;
}
#post{
position:absolute;
border:1px solid red;
width:580px;
left:210px;
float:left;
text-align:left;
}
#sb{
width:1000px;
float:left;
margin:0 auto;
text-align:left;
}
.sb1{
border:1px solid blue;
width:200px;
float:left;
}
.sb2{
border:1px solid black;
width:200px;
float:right;
}
</style>
</HEAD>
<BODY>
<div id="wrapper">
<div id="post">我是中间内容</div>
<div id="sb">
<div class="sb1">跑左边</div>
<div class="sb2">跑右边</div>
</div>
</div>
</BODY>
</HTML>