下圖是手Q吃喝玩樂  好友去哪兒九宮格圖的圖示：

從上圖我們可以分析出如下需求：

• 圖片大小自適應；
  圖片個數不同時，圖片按照指定方式排列；
  圖片相鄰處有1px空白間隙。

我們以最復雜的6圖布局為例，一步一步來看如何以純CSS實現。

1、float布局

最容易想到的，也是最簡單的方案，就是 float 布局：

圖片大小自適應：寬度百分比，高度使用 padding-top 百分比
圖片個數不同時，圖片按照指定方式排列：使用 nth-child 偽類指定不同情況下的元素大小
圖片相鄰處有1px空白間隙：使用 border-box + border模擬邊框

這里父元素的高度未知，height使用百分比行不通，而padding的百分比值是依據父元素的寬度來計算的，我們可以使用padding-top撐開高度。

讓我們一瞅偽碼：

XHTML

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表