實如今1個大div中放置8個小div，且小的div裏面存放圖片和文字

（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 - 圖片剩餘的高度，同時設置行高等於此高度，能夠實現文字的上下居中。