二、基本布局代码

参照 Yahoo! UI Lib Grids，我把上中下三行分别命名为 #hd、#bd、#ft，是 #header、#body 和 #footer 的缩写。关于 id 和 class 的命名，各自有各自的习惯。在 CSS 里面，一般习惯用中划线法（如 comment-list）、下划线法（如 comment_list）、骆驼命名法（如 commentList）和帕斯卡命名法（如 CommentList），我个人比较倾向于使用下划线法。

中间的两栏我命名为 #main 和 #sidebar。哪部分先显示呢？我想左侧的新评论先显示可能更好一些，毕竟在大部分情况下它的宽度都大于右侧。于是在 HTML 里面 #main 要写在 #sidebar 前面，如下：

<div id="hd"></div>
<div id="bd">
<div id="main"></div>
<div id="sidebar"></div>
</div>
<div id="ft"></div>

样式表怎么写呢？#hd、#ft可以先不管，#bd 因为其内部有浮动，不能自适应高度，所以需要清除浮动，方法有很多。如果不清除浮动，那么 #ft 的内容就会“见缝插针”的显示在你不想见到它的地方。本文的例子，可以给 #ft 设定 clear: both;，或者为 #bd 进行 easy clearing。

因为 #main 的宽度是自适应的，#sidebar 的宽度又固定为 350px，在 HTML 里面又是 #main 在前，所以不能用简单的浮动（浮动的元素必须设定宽度，否则会根据内容取宽度），也不能用绝对定位，因为你不知道两者的高度。根据屏幕宽度不同，有时候是 #sidebar 比较高，有时候是 #main 比较高，使用绝对定位的话，下面的 #ft 显示就会有问题。所以我用了一种不常用的办法（我不太喜欢这种负值 margin 的写法），如下：

#bd{
padding-right: 410px; /* 因为有 padding 所以 clear float 不能简单地将 #bd 设置为浮动 */
}
#main{
width: 100%;
float: left;
}
#sidebar{
width: 350px;
float: left; /* 如果float right，在 IE 下有问题，这里 fix 一下 */
margin-left: 60px; /* 栏间距，即 gutter */
margin-right: -410px; /* 这一句很重要 */
}

查看至今为止的效果

如果我们在 HTML 里面先写固定宽度的 #sidebar，那么 CSS 相当简单了，只需将 #sidebar 浮动到右边，然后 #main 再 margin-right: 410px; 就可以了，很 solid。这样 #main 的宽度也自适应了。CSS 如下（实际项目中我会采用这种写法，本例不是）：

#sidebar{
float: right; /* 注意在 HTML 里面 #sidebar 写在 #main 前面 */
width: 350px;
}
#main{
margin-right: 410px;
}

出处：蓝色理想
责任编辑：blue

上一页 分析结构 下一页 左栏新评论列表

◎进入论坛网页制作、网站综合版块参加讨论