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; }
相关文章推荐
- css中合理的使用nth-child实现布局
- css伪类:nth-child(an+b) 使用说明
- CSS的nth-child使用方法
- CSS:使用float实现水平布局、块级元素不换行
- 使用CSS实现三列布局
- Android学习历程--合理使用布局实现手机信息界面
- 使用Div+css实现表格布局
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
- css判断不同分辨率显示不同宽度布局实现自适应宽度&css3 @media样式的使用
- HTML,使用div+css实现自适应table布局
- 使用CSS实现两列布局
- 使用CSS布局定位属性轻松实现优美站点布局
- 使用DIV+CSS实现Table布局
- 使用css实现三栏自适应布局
- 使用IE条件注释 实现兼容 IE, Opera, Firefox 的 DIV+CSS 表格布局 By shawl.qiu
- 使用css实现表格布局
- 使用CSS Grid布局实现网格的流动
- .使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)
- CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)