实如今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 - 图片剩余的高度，同时设置行高等于此高度，能够实现文字的上下居中。