（1）先上代碼，即：
1 <template> 2 <div class="icons"> 3 <div class="icon"> 4 <div class="icon-img"> 5 <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" /> 6 </div> 7 <p class="icon-desc">熱門景點</p> 8 </div> 9 <div class="icon"> 10 <div class="icon-img"> 11 <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" /> 12 </div> 13 <p class="icon-desc">熱門景點</p> 14 </div> 15 <div class="icon"> 16 <div class="icon-img"> 17 <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" /> 18 </div> 19 <p class="icon-desc">熱門景點</p> 20 </div> 21 <div class="icon"> 22 <div class="icon-img"> 23 <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" /> 24 </div> 25 <p class="icon-desc">熱門景點</p> 26 </div> 27 <div class="icon"> 28 <div class="icon-img"> 29 <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" /> 30 </div> 31 <p class="icon-desc">熱門景點</p> 32 </div> 33 <div class="icon"> 34 <div class="icon-img"> 35 <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" /> 36 </div> 37 <p class="icon-desc">熱門景點</p> 38 </div> 39 <div class="icon"> 40 <div class="icon-img"> 41 <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" /> 42 </div> 43 <p class="icon-desc">熱門景點</p> 44 </div> 45 <div class="icon"> 46 <div class="icon-img"> 47 <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" /> 48 </div> 49 <p class="icon-desc">熱門景點</p> 50 </div> 51 </div> 52 </template> 53 54 <script> 55 export default { 56 name: 'HomeHeader' 57 } 58 </script> 59 60 <style lang="stylus" scoped> 61 .icons 62 overflow: hidden 63 height: 0 64 padding-bottom: 50% 65 background: green 66 .icon 67 position: relative 68 float: left 69 overflow: hidden 70 height: 0 71 padding-bottom: 25% 72 width: 25% 73 border: .01rem solid #fff 74 .icon-img 75 position: absolute 76 top: 0 77 left: 0 78 right: 0 79 bottom: 1.4rem 80 background: #00bcd4 81 .img-content 82 height: 100% 83 display: block 84 margin: 0 auto 85 .icon-desc 86 position: absolute 87 left: 0 88 right: 0 89 bottom: 0 90 height: 1.4rem 91 line-height: 1.4rem 92 text-align: center 93 color: #333 94 </style>
（2）首先設置大div的高度，這里通過設置icons,即：
height: 0
padding-bottom: 50%
可以實現大div高度為長度的50%，50%是根據父元素的寬度作為標准的。
（3）然后設置小div的高度和寬度，即icon為：
height: 0
padding-bottom: 25%
可以實現小div的高度為元元素寬度的25%，同時設置小div的寬度為：
width: 25%
這樣就實現了將大div分割成8個小的div。
（4）此時將圖片導入到HTML中，發現明顯被撐開了，這時候icon中設置為overflow；然后要確定圖片的位置，即在圖片外層包裹1層div為icon-img，然后在這個樣式中確定圖片的位置，即：
position: absolute
top: 0
left: 0
right: 0
bottom: 1.4rem
bottom設為1.4rem是為了給下方的文字留出空間。當然這樣定義后父元素icon要設置position：relative。
（5）這時圖片的位置是正確的，但圖片太大了。因此在<img>中增加1個樣式img-content，將其height設為100%,然后希望圖片能夠居中，故在img-content中設置：
display: block
margin: 0 auto
這樣圖片就能居中顯示。
（6）然后就是設置下方的文字，給p標簽外層加1個div，樣式為icon-desc，設置為
position: absolute
left: 0
right: 0
bottom: 0
這里不用設置top了，然后這樣就能確定文字的位置，然后設置其高度等於之前小div - 圖片剩余的高度，同時設置行高等於此高度，可以實現文字的上下居中。