Web 标准实践——豆瓣的首页

• 关 键 词：
• firefox
• window
• html
• css

四、右栏豆瓣推荐

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

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

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

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

.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 验证，不过没什么意思 -_-）

【深 度 阅 读】 相 关 文 章

• 虫虫速写——在家睡觉的旅游装备
• 一个链接让QQ日流量损失几千万？
• Wiki基础知识
• 钉子的艺术