移动端常见九宫格布局

快来打我* 2021-08-13 23:14 528阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70][]

css样式

值得注意的是 transform: scaleX(0.6);这样用是因为1px在移动端手机会显得比较粗，所以做了0.6缩放。

cf 类名为 清除浮动的缩写，使用时需要把清除浮动代码加上。

.grid{
        background:#fff;
        font-size:0.42rem;
        color:#333;
        .item{
          .liItem{
            float: left;
            width: 33.3333%;
            background: #fff;
            padding: .49rem 0;
            box-sizing: border-box;
            font-size: 0.42rem;
            color: #111;
            position: relative;
            // 3倍数的li没有右border
            &:not(:nth-child(3n))::before{
              content: '';
              position: absolute;
              width: 1px;
              height: 100%;
              top: -1px;
              right: 0;
              border-right: 1px solid rgba(232,232,232,0.8);
              transform: scaleX(0.6);
            }
            &::after{
              content: '';
              position: absolute;
              height: 1px;
              width: 100%;
              bottom: 0;
              left: 0;
              border-bottom: 1px solid rgba(232,232,232,0.8);
              transform: scaleY(0.6);
            }
          }
        }
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70]: /images/20210813/ef45426ab816410fb6b4e58a7fe5bf7d.png