|
四、右欄豆瓣推薦
最大的難點(diǎn)。因?yàn)闀?shū)名長(zhǎng)短不一致，導(dǎo)致浮動(dòng)的塊高度并不能夠統(tǒng)一（如果不設(shè)置的話(huà)），這樣對(duì)于第二排的浮動(dòng)就會(huì)有影響。我沒(méi)想出有什么好的辦法可以解決這個(gè)問(wèn)題，所以只能給一個(gè)不完美的寫(xiě)法（但這很常用）：
<ul>
<li>
<div><img src="..." alt="..." /></div>
<p>書(shū)或其他 item 的名字</p>
</li>
...
</ul>
在圖片周?chē)黾右粋�(gè) <div> 方便控制（看下面的 CSS）。豆瓣上的圖片是大小不一的（真是災(zāi)難），本例簡(jiǎn)化為圖片大小相同，這樣不會(huì)耽誤太多時(shí)間。
我把圖片周?chē)?<div> 高度和 <p> 的高度分開(kāi)，這樣在放大文字的時(shí)候，可以保持相對(duì)良好的可讀性（但還是有不足的地方）。樣式表如下：
.itemlst{
width: 350px;
margin: 0;
padding: 0;
}
.itemlst li{
width: 100px;
padding: 0 8px; /* 使用 margin 在 IE 下會(huì)有 double margin 的 Bug */
float: left;
text-align: center;
list-style: none;
}
.itemlst li img{
padding: 10px;
}
.itemlst li div{
width: 100%;
height: 120px; /* 這樣把圖像所處的塊高度統(tǒng)一在 120px */
}
.itemlst li p{
float: left;
height: 6em; /* 最多顯示四行文字，再放大就不行了 */
line-height: 1.5em;
}
查看至今為止的效果（通過(guò) Strict 驗(yàn)證，不過(guò)沒(méi)什么意思 -_-）
出處：藍(lán)色理想
責(zé)任編輯：blue
上一頁(yè) 左欄新評(píng)論列表 下一頁(yè) 其他及總結(jié)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁(yè) 
第 4 頁(yè) 右欄豆瓣推薦
