css中合理的使用nth-child实现布局
写这篇文章的目的。主要是今天要实现一个布局: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;
- }
css中合理的使用nth-child实现布局的更多相关文章
- css中常用的七种三栏布局技巧总结
三栏布局,顾名思义就是两边固定,中间自适应.三栏布局在开发十分常见,那么什么是三栏布局?例如当当网首页边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应.效果如下图所示: 下面围绕的这样的 ...
- 使用CSS中margin和padding的基础和注意事项
在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备 ...
- CSS中有关水平居中和垂直居中的解决办法
CCS中让div等块级元素在父级元素中居中的方法: (1)div{ margin:0 auto } 该方法只能实现水平的居中,无法实现元素的垂直居中 (2)当div元素的宽高是固定的,然后设置位 ...
- CSS遮罩——如何在CSS中使用遮罩
Css遮罩是2008年4月由苹果公司添加到webkit引擎中的.遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果. 图像是由rgb三个 ...
- CSS中盒模型的理解
今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 (摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助) ...
- 关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置)
关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html 前言:最近在 ...
- CSS中各种长度单位总结
在前端开发工作过程中曾碰到这样一问题: <style type="text/css"> .parent{ width:400px; height:300px; bord ...
- CSS中的偏僻知识点
一.css中的calc 在CSS中有calc属性用于尺寸的计算,可以让百分比和像素值进行运算. div {width : calc(100% - 30px);} 为了兼容性 /*Firefox*/ - ...
- CSS中不透明度继承问题的处理
关于CSS中不透明度的设置,除了兼容方面的问题,还有不透明度继承问题,这里只讨论下后者. 那么, 什么时候会发生不透明度继承问题? 当文档结构中有父子嵌套关系的时候,并且父元素有不透明度属性设置时,会 ...
- CSS中margin边界叠加问题及解决方案(转)
边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...
随机推荐
- 用antlr4来实现《按编译原理的思路设计的一个计算器》中的计算器
上次在公司内部讲<词法分析——使用正则文法>是一次失败的尝试——上午有十几个人在场,下午就只来了四个听众. 本来我还在构思如何来讲“语法分析”的知识呢,但现在看来已不太可能. 这个课程没有 ...
- [Testing][API][soapUI] 測試API 的軟體工具紀錄
soapUI 測試API 的軟體工具紀錄 http://files.cnblogs.com/vincentmylee/soapUIScript%E9%9C%80%E8%A6%81%E8%B3%87%E ...
- shell编程中一个空格引起的异常
最近使用shell编写一个备份和替换f服务器程序的脚本replace.sh,初衷是为了节约人力的重复机械的劳动.在脚本编写过程中,由于疏忽多打了一个空格,出现了一个不符合预期的情况. 1.先看一下出问 ...
- 北大ACM(POJ1017-Packets)
Question:http://poj.org/problem?id=1017 问题点:贪心. Memory: 224K Time: 32MS Language: C++ Result: Accept ...
- error C2143: syntax error : missing ';' before '}'
今天弄Tab控件,干了一件非常愚蠢的事,没有去声明头文件.这也是今天要记录的问题,提示如下各种 前面一个符号是错误的.如果初学者遇到,算作一个提示,记得声明新类的.h 头文件 标签空间再进一步.cpp ...
- solr 6.5.1 linux 环境安装
前言 最近在研究搜索引擎,准备搭建一套属于自己的搜索APP,用于搜索的数据我已通过scrapy抓到本地了,现在需要一个搜索引擎来跑这些数据.于是选择了基于Lucene的solr来为我做搜索引擎的工作. ...
- acedssget F 方式
ads_point p1; ads_point p2; acedGetPoint(NULL, _T("\n插入第一点"), p1); acedGetPoint(p1, _T(&qu ...
- mysql 转载
一.MySQL概述 1.什么是数据库 ? 答:数据的仓库,如:在ATM的示例中我们创建了一个 db 目录,称其为数据库 2.什么是 MySQL.Oracle.SQLite.Access.MS SQL ...
- linux vim 常用操作
vim 字符级 上k下j左h右i,键盘的方向键也可以移动 单词级 b上个单词首字母 w下个单词首字母 e下个单词的尾字母 行级 0行首 $行尾 删除 dd 删除光标所在行 文档级 gg 文档首行,首个 ...
- <MySQL>入门六 变量
/* 变量 系统变量: 全局变量 会话变量 自定义变量 用户变量 局部变量 */ -- ------------系统变量-------------------- /* 变量由系统提供,不是用户定义,属 ...