本部落格已搬家
點此前往新部落格

新主機測試中...

用 css 解決產品列表清單掉一格的情況


我們上網時偶爾會看到上圖左這種情況,
應該是一塊一塊排好的內容,卻出現異樣的空白?

有時候這個是設計風格,為了體現品牌的自由風氣,並特意強調那兩個落單區塊的獨特性,並且為了視覺上的平衡美感所做的處理,甚至還經過 A/B test 與各種 UX 實驗,除了可以達到最佳的轉換率,還可以引起討論話題...

但我想此例純粹就是個小失誤而已。(ps.上圖案例網頁不是我做的,只是上網時剛好逛到而已。)

在上圖右我們把每個塊狀元素的區域劃分出來,簡單來說,就是有些區塊字太多了,讓某個塊狀容器的高度跟大家不一樣高,所以無法排列整齊。

處置方式很簡單,就是請太平洋 SOGO 百貨跟遠東巨城購物中心把名字改短一點......你覺得有可能嗎? 又是該死的網頁設計人員要處理了。

常見的問題,直接寫一篇,這樣以後就可以直接丟範例給新人,然後自己先偷溜。
以下羅列一些處置方式:

1.用 table
A: 我最近發現一個商品列表區塊排法,即使圖片不一樣大,文字內容長短不一,每個區塊還是可以同寬、等高,
B: 嗯嗯!
A: 而且程式碼很精簡,連 IE5 也可以支援,而且 PChome 商店街都在用。
B: 喔~是什麼東西這麼棒?
A: table...

不是說真的還要用< table>、 < tr>、< td>,我們還是可以用 div, section, ul, li,然後在 CSS 設定 display:table, display:table-row,display:table-cell 之類的屬性,達成類似的效果。拿來排頻道節目時刻表、購物車、訂單清單、菜單還差不多,但拿來排產品列表嗎? 真的不是一個好法子。
(程式碼範例請見本文最後面)

2.固定高度
既然症狀是由於各區塊不同高,那把區塊設定統一高度就好了吧? 當然可以。但可能為了各種情況,例如產品名稱又臭又長又不能只用一行顯示,需要預留高度,於是就發生整個畫面異常留白很多的情況。而且固定高度的話,RWD 調整的時候很累。
(範例請見本文最後面)

至於各種用 js 給定區塊高度,讓區塊同高(equal height),而且不會有多餘空白,但可能降低畫面 render 效能的奇巧淫技,這裡暫不討論。

3.用 display:flex
雖然 IE8、IE9 還沒死光,但是行動裝置的發展終於讓網頁推進一步,我們可以用「可是老闆你這個行業的網站,瀏覽者超過 7 成都用手機來看耶!」來當籌碼,本來一些使用時還需要考慮 fallback 的技巧,現在可以更自由的使用了。

如此例,我們可以使用 display:flex 的一些特性簡易的達成一排3個,多的會換行的產品清單。

.外容器{display: flex;justify-content: space-between;flex-wrap: wrap;}
.小項目{width:33%}

(程式碼範例請見本文最後面)

這年頭通常還會用 flex 來處理一些以前本來要用奧步來做的細節。
例如寬高不明的內容要垂直水平置中、
不同解析度時,多個區塊的上下或左右顯示順序置換,
更多 flex 的屬性細節可參閱 Flex 布局教程:语法篇 - 阮一峰的网络日志

4.用 display:grid
目前還有一個新玩具叫 display:grid,此 grid 非一般平面設計或以前網頁排版講的 grid system,這是一個新出的 css 規範,他可以更方便的達成基本網頁布局,而不是讓每個區塊東包西包從外到內包了好多層,然後讓大家跟float, position, clearfix...奮戰。

.外容器{display:grid;grid-template-columns:33.3% 33.3% 33.3%;grid-gap: 10px;}

對,只要一行就可以處理三欄各多寬、間距多少。


可惜目前"一般老百姓"用的瀏覽器都不支援。
(程式碼範例請見本文最後面)

5.waterfall layout 瀑布流排版解
如果我們不想處理每塊圖文內容的資料量都不一樣大的問題,那要怎樣在這個畫面中顯示最多的資料? 勢必就是這種瀑布流排版了。


display:flex 也可以達成簡易瀑布流,但在資料顯示順序,還有不同瀏覽器的相容性令人不太滿意,所以還是使用Pinterest GridMasonry 之類的套件來達成。

上述五種方案的 css 簡略範例

See the Pen 用 css 解決產品列表清單掉一格的情況 by jimmy su (@mimi12345tw) on CodePen.


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


css

Comments 轉載文章請留言說一聲

comments powered by Disqus