.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 来定位也是相当麻烦的一件事情。

四、右栏豆瓣推荐

　　最大的难点。因为书名长短不一致，导致浮动的块高度并不能够统一（假如不设置的话），这样对于第二排的浮动就会有影响。我没想出有什么好的办法可以解决这个问题，所以只能给一个不完美的写法（但这很常用）：

Example Source Code []

<ul>
<li>
<div><img src="..." alt="..." /></div>
<p>书或其他 item 的名字</p>
</li>
...
</ul>

　　在图片四周增加一个 <div> 方便控制（看下面的 CSS）。豆瓣上的图片是大小不一的（真是灾难），本例简化为图片大小相同，这样不会耽误太多时间。

　　我把图片四周的 <div> 高度和 <p> 的高度分开，这样在放大文字的时候，可以保持相对良好的可读性（但还是有不足的地方）。样式表如下：

Example Source Code []

.itemlst{
width: 350px;
margin: 0;
padding: 0;
}
.itemlst li{
width: 100px;
padding: 0 8px; /* 使用 margin 在 IE 下会有 double margin 的 Bug */
float: left;
text-align: center;
list-style: none;
}
.itemlst li img{
padding: 10px;
}
.itemlst li div{
width: 100%;
height: 120px; /* 这样把图像所处的块高度统一在 120px */
}
.itemlst li p{
float: left;
height: 6em; /* 最多显示四行文字，再放大就不行了 */
line-height: 1.5em;
}

查看至今为止的效果（通过 Strict 验证，不过没什么意思 -_-）

五、其他

　　◎ 因为 FF 和 IE 对于 border: 1px dotted #DDD 显示的效果不一致。所以一般我会用背景代替（本例没有这么做）。
　　◎ 文字大小的控制，在 body 中设置基准值 small，然后使用百分比控制其他所有的文字大小。具体可以参考Bulletproof Web Design，中文版图书也已经上市。另，这只是习惯而已，在国内制作网页请根据实际情况量力而为。
　　◎ 关于第四部分的写法，在另外的文章内有说明。
　　◎ 在 CSS 的一开始，设定 *{margin: 0;padding: 0}，统一各个浏览器的细微的差别。
　　◎ 最后设置各部分的字体和元素间的间距，完成整个页面的制作。
　　查看最终效果
　　IE 下会有些局部的差异，大家有爱好的话，可以研究一下，这里仅为 Firefox 服务。

六、我们学到了什么

　　◎ 利用 float 进行布局，非凡是第二部分里面的第二种写法很常用；
　　◎ 利用 position: absolute; 和 position: relative; 进行局部定位；
　　◎ 列表项（<li>）的浮动块状显示；
　　◎ 在制作符合标准的页面时，需要考虑 resizing window 和 change font size 的问题。