下圖是手Q吃喝玩樂 好友去哪兒九宮格圖的圖示：
從上圖我們可以分析出如下需求：
圖片大小自適應；我們以最復雜的6圖布局為例，一步一步來看如何以純CSS實現(xiàn)。
1、float布局
最容易想到的，也是最簡單的方案，就是 float 布局：
圖片大小自適應：寬度百分比，高度使用 padding-top 百分比
圖片個數(shù)不同時，圖片按照指定方式排列：使用 nth-child 偽類指定不同情況下的元素大小
圖片相鄰處有1px空白間隙：使用 border-box + border模擬邊框
這里父元素的高度未知，height使用百分比行不通，而padding的百分比值是依據(jù)父元素的寬度來計算的，我們可以使用padding-top撐開高度。
讓我們一瞅偽碼：
XHTML
CSS
實際效果并不理想，如下圖：
新聞熱點
疑難解答
