您的位置:首页 > Web前端 > CSS

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

2017-07-06 13:45 501 查看

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


大家能够先自己实现一下,我这里也是思考了非常久,最后整理了思绪,发现先给每一个li加入margin-right:10px;然后给第3n个加上margin-bottom:10px;而且去掉margin-right,当然了,假设类似最后一个图,正好最后一排三个的情况,可能最后一行会超出,所以在li的last-child上加上margin-bottom:0;(最后一条是后面补充的,当时忘了加上去,不好意思)

代码:

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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: