九宫格实现问题

给你树下九宫格的思路吧，希望对你有用！九宫格，就是给人的感觉是一个元素内成比例从左往右依次排列，当超过3个的元素自动换行到下一行，那么问题，一般九宫格里面的元素都有自己的margin值（就是给人单独元素的视觉）；这个时候如果是margin-left：10px，那么第一个怎么办，第四个怎么办，第七个怎么办，如果对每1、4、7、11...等元素都进行一次设置margin-left:0的话太麻烦，如果是margin-right，那么也是一样的道理；所以我们这个时候就需要套两个元素，如<div class="con"> <div class="con_c"> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </div> </div>这样的格式；就以手机端为例；外面的con类宽度为100%；里面的con_c宽度为120%；总之要大于三个li标签宽度加上margin宽度的总合就行；然后li给他display:inline-block流式布局；或者直接float:left也行，高度设置一下；宽度每一个li=32%；margin-right:1.3%，差不多就行；注意这里con_c元素需要设置溢出隐藏；然后你就发现这里面的九个元素就是依次排列下来了，每当1、4、7、11就会换行

九宫格实现问题

1回答