布局总结三: icon图标+标题上下两排排列

效果展示：

 方法一：通过rem来，设置固定的宽高(width:100%,height:3.75rem)---1rem = 50px

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>

css代码

.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

 

 方法二：通过比例来写样式---1rem = 50px

html布局代码

    <div class="icon_wrap">
        <div class="icon_squ" v-for="item in iconList" :key="item.urlId">
            <div class="img_wrap">
                <img class="icon_img" :src="item.imgurl" alt="">
            </div>
            <p class="icon_p">{{item.imgname}}</p>
        </div>
    </div>

css代码

    .icon_wrap
        overflow: hidden
        width: 100%
        height: 0
        padding-bottom: 50%
        .icon_squ
            position: relative
            overflow: hidden
            float: left
            width: 20%
            padding-bottom: 25%
            .img_wrap
                position: absolute
                top: 0
                left: 0
                right: 0
                bottom: 0.3rem
                box-sizing: border-box
                padding: 0.3rem
                .icon_img
                    display: block
                    margin: 0 auto
                    height: 100%
            .icon_p
                position: absolute
                left: 0
                right: 0
                bottom: 0 
                height: 0.44rem
                line-height: 0.3rem
                text-align: center