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

效果图

 

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>

2.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