zoukankan      html  css  js  c++  java
  • 布局总结四:利用行高来撑开高度

    效果图

    1.html布局代码

          <div class="parts_city">
            <div class="tit">当前城市</div>
            <div class="list_content">
              <div class="list_wrap">
                <div class="list_btn now_btn">北京</div>
              </div>
            </div>
          </div>
    
          <div class="parts_city">
            <div class="tit">热门城市</div>
            <div class="list_content">
              <div class="list_wrap">
                <div class="list_btn">北京</div>
              </div>
              <div class="list_wrap">
                <div class="list_btn">北京</div>
              </div>
              <div class="list_wrap">
                <div class="list_btn">北京</div>
              </div>
              <div class="list_wrap">
                <div class="list_btn">北京</div>
              </div>
              <div class="list_wrap">
                <div class="list_btn">北京</div>
              </div><div class="list_wrap">
                <div class="list_btn">北京</div>
              </div>
            </div>
          </div>

    css代码

      .parts_city
         100%
        .tit
           100%
          line-height: 0.6rem
          background: #eee
          padding-left: 0.2rem
          color: #666
        .list_content
          padding: 0.1rem 0.6rem 0.1rem 0.1rem
          overflow: hidden
          .list_wrap
            float: left
             33.3%
            .list_btn
              border: 0.02rem solid #ccc
              margin: 0.1rem
              padding: 0.1rem 0
              border-radius: 0.1rem
              text-align: center
              font-size: 0.24rem
            .now_btn
              border: 0.02rem solid $bgColor
  • 相关阅读:
    linux inode索引节点使用率100% 解决
    Linux常用命令
    mongodb常用命令
    抓包工具简介:fiddler、charles
    博客园自定义更换背景
    ant+jmeter应用
    BeanShell断言
    jmeter 常用函数(一):__Random
    git常见错误解决方法
    react环境搭建
  • 原文地址:https://www.cnblogs.com/pwindy/p/14954787.html
Copyright © 2011-2022 走看看