首页 > 其他 > 详细

布局总结四:利用行高来撑开高度

时间:2021-06-30 17:59:33      阅读:15      评论:0      收藏:0      [点我收藏+]

效果图

技术分享图片

 

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
    width: 100%
    .tit
      width: 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
        width: 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

 

布局总结四:利用行高来撑开高度

原文:https://www.cnblogs.com/pwindy/p/14954787.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!