移动端常见九宫格布局

<div class="grid"> <ul class="item cf"> <li class="liItem"> <div>标题一</div> </li> <li class="liItem"> <div>标题二</div> </li> <li class="liItem"> <div>标题三</div> </li> <li class="liItem"> <div>标题四</div> </li> <li class="liItem"> <div>标题五</div> </li> <li class="liItem"> <div>标题六</div> </li> <li class="liItem"> <div>标题七</div> </li> </ul> </div>

 

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); } } } }