zoukankan      html  css  js  c++  java
  • 布局总结三: icon图标+标题上下两排排列

    效果展示:

     方法一:通过rem来,设置固定的宽高(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
       100%
      height: 3.75rem
      .icon_squ
        float: left
         20%
        height: 50%
        text-align: center
        .icon_img
           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
             100%
            height: 0
            padding-bottom: 50%
            .icon_squ
                position: relative
                overflow: hidden
                float: left
                 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
  • 相关阅读:
    调用tensorflow中的concat方法时Expected int32, got list containing Tensors of type '_Message' instead.
    lstm公式推导
    RNN推导
    word2vec原理
    反向传播神经网络入门
    mac升级系统自带numpy失败解决方案
    mac安装.net core
    mac 当前位置打开终端
    docker安装配置
    KVM性能优化学习笔记
  • 原文地址:https://www.cnblogs.com/pwindy/p/14940379.html
Copyright © 2011-2022 走看看