有朋友在QQ上問我一個關于CSS的問題，一個產品展示頁，有產品圖片與產品名稱，如何用CSS布局來實現，下面談談我的觀點以及提出我的方法，大家可以討論，如有不當，請大家在MB5U.com上評論或留言指出來，大家共同進步。

　　從事網頁設計工作的朋友應該有過很多這樣的案例，上面放置企業的產品圖片，下面放置產品的名字，點擊圖片或產品名字可以查看產品的具體資料。當然，這樣的形式，在其它網站上也經常出現，例如圖片新聞、寫真壁紙站等等。我們看效果圖片（可點擊放大）：


　　首先我們分析一下，這樣的形式每一組是類似的：上部一個圖片鏈接，下部一個文字鏈接，然后重復。進行適應的排列即可。我們可以將它們看作是一組無序列表的列表項，而一頁中的所有產品即是一個無序列表。

　　每一個列表項，包含了一張圖片并進行鏈接，文字鏈接。我們用CSS對圖片與文字進行適當的控制，即可實現這樣的效果。然后讓每一個列表項進行浮動，讓它們一行三個，并且在三個列表項水平居中對齊于整個無序列表。

　　好了，廢話不多說了，上面的思路基本清楚了，我們開始HTML代碼的編寫：


　　我們建立了一個無序列表，ID為products。每一個列表項包括了一個圖片鏈接，一個文字鏈接，為了便于CSS進行控制，我們將文字鏈接放置在span中。

　　下面我們開始CSS代碼的編寫：


　　CSS整體布局聲明：邊距與填充均為零，12px的文字大小，黑色的文字，去除文字裝飾線（即定義鏈接文字無下劃線）。


　　定義無序列表的寬度為582px，關于這個數值的由來我們在下面會有說明，上下邊距為50px，左右邊距為自動，實現UL的水平居中對齊。


　　定義無序列表的列表項的樣式，即一組“產品圖片”和“文字名稱”：寬度為154px，高度為154px，向左浮動，左邊距為30px。為了消除雙倍邊距的bug，我們設置display:inline;。我們一行是三組內容，共有四個邊距，154*3 30*4=582。這就是整個無序列表寬度的由來，看下面的示例圖片（可點擊放大）：



　　設置鏈接均為塊元素。輕易進行控制，而且設為塊元素以后，增大了鼠標懸停的區域，提高用戶體驗。
　　設置鏈接圖片的邊框為1px的實線，顏色為深灰色。設置填充為1px，讓邊線與圖片之間產生一象素的空隙。


　　這些代碼是對鏈接文字的樣式定義，寬度和高度是154px、30px。行高為24px，文字居中對齊。我們來看看現在的效果！

　　或許你認為我們的工作已經結束了，圖片及文字已經按預定的方式上下排列，而且整個頁面看上去還不錯。但我們需要注重，或許文字并不是固定的，或許是三個字，或許是十五個字，假如文字過多，會產生什么樣的后果呢？（可點擊放大）


　　暈倒！文字將li擠走了，一切都走樣了。你會想到可以用ASP腳本來控制讀取的文字數量，或許這并不是什么好主意，我們完全可以通過CSS來搞定它，我們的鏈接是塊元素，我們可以設置文字超出寬度154px的時候，自動的隱藏，并且在IE中可以實現省略號的效果，我們在#products li span a增加以下代碼：


　　我們再來看看效果！現在就不會出現破壞布局的情況了！
　　歡迎大家參與討論，說說你的看法，這樣的形式如何制作最合理科學！