JunChen Wu / 标准

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

写于 2005年12月12日 13:37 评论(1)

很久以前在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撑破了。

Warm Regards,
J.

原文地址:http://www.junchenwu.com/2005/12/post_26.html

评论(1)

hiads - 2007年01月25日 22:34

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

发表评论