本篇內(nèi)容介紹了“怎么用CSS實(shí)現(xiàn)九宮格圖”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的北安網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

 

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

• 圖片大小自適應(yīng)；
  圖片個(gè)數(shù)不同時(shí)，圖片按照指定方式排列；
  圖片相鄰處有1px空白間隙。

我們以最復(fù)雜的6圖布局為例，一步一步來(lái)看如何以純CSS實(shí)現(xiàn)。

1、float布局

最容易想到的，也是最簡(jiǎn)單的方案，就是 float 布局：

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

這里父元素的高度未知，height使用百分比行不通，而padding的百分比值是依據(jù)父元素的寬度來(lái)計(jì)算的，我們可以使用padding-top撐開(kāi)高度。

讓我們一瞅偽碼：

XHTML

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <div class="float">  

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

3.     ...   

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

5. </div>  

 CSS

CSS Code復(fù)制內(nèi)容到剪貼板

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. }    

實(shí)際效果并不理想，如下圖：

可以看到 float 布局的優(yōu)點(diǎn)是DOM結(jié)構(gòu)十分簡(jiǎn)單，缺點(diǎn)是容易出現(xiàn)空白間隙錯(cuò)位，優(yōu)缺點(diǎn)都十分明顯，它更適用于js計(jì)算的版本。

2、flex布局

還有誰(shuí)？flex！flex布局有以下重要特性：

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

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

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

flex 布局上下劃分

來(lái)，我們快動(dòng)手分塊吧！新解決方案出現(xiàn)導(dǎo)致的腎上腺素上升，使我們迫不及待使用了傳統(tǒng)css文檔流自上而下的方式來(lái)劃分，我稱為上下劃分，如下圖：

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

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

來(lái)看下實(shí)際效果，你也可以猛擊demo來(lái)查看源碼：

demo中我們看到中間那條豎空白間隙錯(cuò)位了，為什么？按照預(yù)期我們上面塊左側(cè)寬度66.6%，下面塊左側(cè)寬度33.3% + 33.3%，兩個(gè)寬度應(yīng)該相等才對(duì)。

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

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

flex 布局左右劃分

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

這樣就解決了豎間隙錯(cuò)位問(wèn)題，但我們依然有所擔(dān)心，中間的橫間隙會(huì)錯(cuò)位嗎？我們來(lái)算一下。

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

整體父元素高度由子元素?fù)伍_(kāi)，不確定；

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

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

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

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

不會(huì)，因?yàn)榇藭r(shí)整體父元素的高度是不確定的，是由子元素內(nèi)容撐開(kāi)的，flex的高度也是由子元素來(lái)?yè)伍_(kāi)的。

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

我們來(lái)看下偽碼，猛擊我看demo：

XHTML

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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復(fù)制內(nèi)容到剪貼板

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. }   

實(shí)際效果：

“怎么用CSS實(shí)現(xiàn)九宮格圖”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)頁(yè)名稱：怎么用CSS實(shí)現(xiàn)九宮格圖
新聞來(lái)源：http://jinyejixie.com/article26/psiscg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、域名注冊(cè)、定制網(wǎng)站、搜索引擎優(yōu)化、網(wǎng)站制作、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)