三、左栏新评论列表

刚才说了，这里可以用 <dl>、<ul>、<ol> 或者 <div>，用什么是个人习惯或者根据需要。我在这里用 <ol>，其他的写法都可以由此扩展。HTML 结构代码如下：

<ol>
<li>
<h3>这里是评论的标题</h3> <!-- Logo 和各部分的大标题已经使用了 h1 和 h2 -->
<p>评论的作者头像<img>和其他信息</p>
<p>评论的摘要</p>
</li>
...
</ol>

这里的图片是用户的头像，所以我觉得应该和用户名放在一起。那么这种写法，用绝对定位简便一些。再提一下，如果使用浮动，必须给浮动的对象设置宽度，不然其宽度就会根据内容计算，这里的 <h3> 就不大方便用反向浮动的方法，因为它需要自适应宽度（如果用反向浮动的方法，可以参考上面布局的 CSS 写法）。

好了，基本问题解释清楚，我们开始写这里的样式（注意要清除 <ol> 的 margin）：

.comment{
list-style: none;
position: relative; /* 给头像的绝对定位一个参照 */
width: 100%; /* 如果不设置宽度，在 IE 下有定位问题；参考 On Having Layout 一文 */
}
.comment h3{
background: #EFE;
margin-left: 75px;
}
.comment p{
margin-left: 75px;
}
.comment .avatar{ /* 头像 <img> 的 class */
position: absolute;
top: 0;
left: 0;
}

查看至今为止的效果

如果我们把头像 <img> 单独提出来，不和用户名写在一起，那么可以不用绝对定位。不过在自适应的布局里，使用 float 来定位也是相当麻烦的一件事情。

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

上一页 基本布局代码 下一页 右栏豆瓣推荐

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