写在2007年11月5日

今天有朋友问我,怎么做一个这样的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>