效果展示:
html布局代码
<div class="icon_wrap"> <div class="icon_squ" v-for="item in iconList" :key="item.urlId"> <img class="icon_img" :src="item.imgurl" alt=""> <p class="icon_p">{{item.imgname}}</p> </div> </div>
方法一:通过rem来,设置固定的宽高(width:100%,height:3.75rem)---1rem = 50px
.icon_wrap
width: 100%
height: 3.75rem
.icon_squ
float: left
width: 20%
height: 50%
text-align: center
.icon_img
width: 0.8rem
height: 0.8rem
margin:0.3rem 0 0.2rem 0
display: inline-block
.icon_p
color: #000