怎么用CSS實現九宮格圖

本篇內容介紹了“怎么用CSS實現九宮格圖”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

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

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

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

1、float布局

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

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

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

讓我們一瞅偽碼：

XHTML

XML/HTML Code復制內容到剪貼板

1. <div class="float">  

2.     <div class="item">1</div>  

3.     ...   

4.     <div class="item">6</div>  

5. </div>  

 CSS

CSS Code復制內容到剪貼板

1. .float {   

2.     overflow: hidden;   

3. }   

4. .item {   

5.     float: left;   

6.     padding-top: 33.3%;   

7.     width: 33.3%;   

8.     border-right: 1px solid #fff;   

9.     border-top: 1px solid #fff;   

10. }   

11. .item:nth-child(1) {   

12.     padding-top: 66.6%;   

13.     width: 66.6%;   

14. }   

15. .item:nth-child(2), .item:nth-child(3), .item:nth-child(6) {   

16.     border-right: 0 none;   

17. }   

18. .item:nth-child(1), .item:nth-child(2) {   

19.     border-top: 0 none;   

20. }    

實際效果并不理想，如下圖：

可以看到 float 布局的優點是DOM結構十分簡單，缺點是容易出現空白間隙錯位，優缺點都十分明顯，它更適用于js計算的版本。

2、flex布局

還有誰？flex！flex布局有以下重要特性：

• 可以將 flex 布局下的元素展示在同一水平、垂直方向上；
  可以支持自動換行、換列（移動端-webkit-box暫不支持，好消息是從iOS9.2、Android4.4開始都支持新flex了）；
  可以指定 flex 布局下的元素如何分配空間，可以讓元素自動占滿父元素剩余空間；
  可以指定 flex 布局下的元素的展示方向，排列方式。

這里面的子元素同一水平、垂直方向展示對我們很有幫助，它使我們更容易控制子元素的排列，而不會錯位。

使用 flex 布局與 float 布局不同的地方在于，移動端目前主要還是-webkit-box，因此圖片個數不同時，我們需要使用不同的html，組合出不同的塊。

flex 布局上下劃分

來，我們快動手分塊吧！新解決方案出現導致的腎上腺素上升，使我們迫不及待使用了傳統css文檔流自上而下的方式來劃分，我稱為上下劃分，如下圖：

上面一塊包含左側1個2/3的大塊，右側2個1/3的小塊，下面一塊則是3個1/3的小塊。

我們指定2/3的大塊寬度是66.6%，1/3的小塊寬度是33.3%（實際可以使用-webkit-box-flex來分配，這里為了下面的計算方便）。

來看下實際效果，你也可以猛擊demo來查看源碼：

demo中我們看到中間那條豎空白間隙錯位了，為什么？按照預期我們上面塊左側寬度66.6%，下面塊左側寬度33.3% + 33.3%，兩個寬度應該相等才對。

然而我們忽略了flex一個重要特性，子元素會自動占滿父元素剩余空間，這時子元素寬度計算受flex控制，下面塊的3個子元素寬度計算并非一定是相等的，會有些許差異，此時66.6% != 33.3% + 33.3%。

怎么破！別急，讓我們冷靜下來重新思考如何劃分。

flex 布局左右劃分

問題在于豎間隙涉及到的左右側寬度計算不穩定，既然如此，我們可以考慮依據豎間隙左右劃分，排除不穩定因素，如下圖：

這樣就解決了豎間隙錯位問題，但我們依然有所擔心，中間的橫間隙會錯位嗎？我們來算一下。

整體父元素寬度確定，為W；

整體父元素高度由子元素撐開，不確定；

左側大塊高度：左側flex父元素寬度（W * 66.6%） * 100% = W * 66.6%；

左側小塊高度：左側flex父元素寬度（ W * 66.6%） * 50% = W * 33.3%；

右側小塊高度：右側flex父元素寬度（ W * 33.3%） * 100% = W * 33.3%。

依然是66.6%與33.3% + 33.3%的等式，但這次高度計算會受 flex 影響嗎？

不會，因為此時整體父元素的高度是不確定的，是由子元素內容撐開的，flex的高度也是由子元素來撐開的。

最終 66.6% === 33.3% + 33.3%

我們來看下偽碼，猛擊我看demo：

XHTML

XML/HTML Code復制內容到剪貼板

1. <div class="wrap-box wrap-6">  

2.     <div class="flex-inner">  

3.       <div class="flex-box1 flex-item"></div>  

4.       <div class="flex-box2">  

5.         <div class="flex-item"></div>  

6.         <div class="flex-item"></div>  

7.       </div>  

8.     </div>  

9.     <div class="flex-inner">  

10.       <div class="flex-item"></div>  

11.       <div class="flex-item"></div>  

12.       <div class="flex-item"></div>  

13.     </div>  

14. </div>  

15.     

CSS

CSS Code復制內容到剪貼板

1. .wrap-box {   

2.   display: -webkit-box;   

3. }   

4.     

5. .flex-inner {   

6.     -webkit-box-flex: 1;   

7.     display: -webkit-box;   

8. }   

9.     

10. .flex-item {   

11.     -webkit-box-flex: 1;   

12.     position: relative;   

13. }   

14. .wrap-6 {   

15.       -webkit-box-orient: horizontal;   

16. }   

17. .wrap-6 .flex-inner {   

18.       -webkit-box-flex: 0;   

19.       -webkit-box-orient: vertical;   

20. }   

21. .wrap-6 .flex-inner:first-child {   

22.       width: 66.6%;   

23. }   

24. .wrap-6 .flex-inner:last-child {   

25.       width: 33.3%;   

26. }   

27. .wrap-6 .flex-item {   

28.       padding-top: 100%;   

29. }   

30. .wrap-6 .flex-box2 .flex-item {   

31.       padding-top: 50%;   

32. }   

33. .wrap-6 .flex-box2 {   

34.       display: -webkit-box;   

35.       -webkit-box-orient: horizontal;   

36. }   

37. .wrap-6 .flex-inner:first-child,   

38. .wrap-6 .flex-box2 .flex-item:first-child {   

39.       margin-right: 1px;   

40. }   

41. .wrap-6 .flex-box1,   

42. .wrap-6 .flex-inner:last-child .flex-item:first-child,   

43. .wrap-6 .flex-inner:last-child .flex-item:nth-child(2) {   

44.       margin-bottom: 1px;   

45. }   

實際效果：

“怎么用CSS實現九宮格圖”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！