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
  • 相关阅读:
    TSQL常用查询语句
    团队开发注意事项
    SQLServer2005 XML数据类型操作
    Nunit学习笔记
    服务器架构工具表
    JQuery 做的下拉文本框
    面向对象和结构化程序设计的区别
    AFX_MSG是什么意思
    DECLARE_MESSAGE_MAP()
    AfxBeginThread的介绍/基本用法
  • 原文地址:https://www.cnblogs.com/pwindy/p/14940379.html
Copyright © 2011-2022 走看看