css中合理的使用nth-child实现布局
2024-08-28 09:55:53
写这篇文章的目的。主要是今天要实现一个布局:li。每行三个,总数不定。仅仅能相邻的li之间须要10px的间距。效果例如以下图:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
大家能够先自己实现一下,我这里也是思考了非常久,最后整理了思绪,发现先给每一个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;
}
最新文章
- MYSQL实现主从复制
- windows环境PhpStorm中简单使用PHP_CodeSniffer规范php代码
- JSONP使用笔记
- 《深入理解Spark:核心思想与源码分析》正式出版上市
- ios ZBar扫二维码奇奇怪怪的错误
- win10启动文件夹:
- Longest Consecutive Sequence [LeetCode]
- Power Map 入门
- linux file命令小记
- 黑盒测试用例设计方法&;理论结合实际 ->; 判定表驱动法
- HTTP 304 Response
- Spring Test 整合 JUnit 4 使用
- 对比AutoResetEvent和ManualResetEvent
- try{}catch{}finally{}的手记
- 20175212童皓桢 《Java程序设计》第六周学习总结
- 在aspx中,如果要引用一个ID号,需要引用外层的ID号(内层的不行)
- mybatis源码解析之环境准备
- 在global.asax中启动定时任务
- Eclipse Indigo 3.7.0 安装GIT插件提示 requires &;#39;bundle org.eclipse.team.core(转)
- swf 文件解析