css中合理的使用nth-child实现布局

写这篇文章的目的,主要是今天要实现一个布局:li,每行三个,总数不定,只能相邻的li之间需要10px的间距,效果如下图:

css中合理的使用nth-child实现布局_第1张图片

大家可以先自己实现一下,我这里也是思考了很久,最后整理了思绪,发现先给每个li添加margin-right:10px;然后给第3n个加上margin-bottom:10px;并且去掉margin-right即可

代码:

li{
            margin-right: 10px;
        }
        li:nth-child(3n){
            margin-right: 0;
            margin-bottom: 10px;
        }

你可能感兴趣的:(css,布局)