左中右三栏布局首先显示中栏
发表于 2005年12月12日 01:37 PM @ 分类:Web Standards
很久以前在dodo的blog上看到"左中右3栏布局中最先显示中栏内容的方法",一直没有时间写写。左中右三栏布局中栏首先显示我是这样做的:

div#wrapper, div#header, div#footer照常写,我很少用绝对定位。header下面开始写一个div#col-container,包含了其中的div#side-content和div#main-content,为了使中栏先显示,要先写div#main-content,再跟上div#side-content。针对main-content的CSS就加一条float: right;,side-content的CSS就是float: left;。完成col-container后,在跟上右边的那一栏div#nav。col-container是float: left;,nav是float: right;。
我习惯于这样的布局方式,很少用padding,以避免Box-Model-Hack。不采用带有方位性的词汇作id,用中间线而不用下划线以区分CSS和程序。至于三栏高度统一,目前还真的没有什么好办法,一般都采取wrapper一个background然后repeat-y的做法。dodo的那个js还不错。
ps. home.donews.com在firefox下面那个div#right显示的长了,都把footer撑破了。

评论
手工Trackback一下
http://www.hiads.cn/x/23/
2007年01月25日 22:34