JunChen::Wish Room 1906

Promoting Usability, Accessibility and Web Standards...

上一篇:菜根谭每日三篇(61-63) | 返回首页 | 下一篇:正确使用XHTML的冒险

左中右三栏布局首先显示中栏

发表于 2005年12月12日 01:37 PM @ 分类:Web Standards

很久以前在dodo的blog上看到"左中右3栏布局中最先显示中栏内容的方法",一直没有时间写写。左中右三栏布局中栏首先显示我是这样做的:

3cols_hack.gif

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.junchenwu.com/cgi-bin/mt-tb.cgi/83.

评论

hiads 说:

手工Trackback一下
http://www.hiads.cn/x/23/

发表评论