.moment-image-div:nth-child(n+1):nth-last-child(-n+9){
width: 33.33%;
float: left;
}
.moment-image-div:nth-child(1):nth-last-child(1){
width: 100%;
}
.moment-image-div:nth-child(1):nth-last-child(2),
.moment-image-div:nth-child(2):nth-last-child(1) {
width: 50%;
float: left;
}

效果图:

至于高度啥的,再自行略调。

css根据子元素多少类设置子元素的属性--九宫格的更多相关文章

  1. HTML块元素,行内元素,类,头部元素

    总结HTML块元素,行内元素,类,头部元素 块元素: 在HTML中,块级元素的高度为其内容的高度,宽度会扩展到与父容器同宽.默认情况下,块级元素会独占一行,并且元素前后行留空. 示例:<h1&g ...

  2. 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。

    设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...

  3. Winform中用户自定义控件中外部设置子控件属性的方法

    假设我们新建立一个用户自定义控件,由一个lable1和pictureBox1组成 此时我们在外部调用该控件,然后想动态改变lable1的值,我们该怎么办? 假设实例化的用户控件名为UserContro ...

  4. 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位

    块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...

  5. 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素

    盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...

  6. css 块元素、内联元素、内联块元素

    块元素.内联元素.内联块元素: 元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素: 块元素,也可以称为行元素,布局中常用的标签 ...

  7. CSS 块元素、内联元素、内联块元素三者的区别与转换

    三种元素 块元素 内联元素 内联块元素 元素之间的转换 三种元素 元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素. 了解这三种元素的特性,才能熟练的进行页面布局. 块元素 块元素, ...

  8. HTML&CSS基础-子元素的伪类选择器

    HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

  9. python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

随机推荐

  1. E - Stones 优先队列

    来源1896 Because of the wrong status of the bicycle, Sempr begin to walk east to west every morning an ...

  2. php代码画足球场

    用代码画了个足球场 原图: 代码画出的效果图: 代码如下: // 创建一个 200X200 的图像 $img = imagecreate(800, 500); // 分配颜色 $bg = imagec ...

  3. phpStudy apache 启动不了

    做  phpstudy 环境配置的时候,apache 一直启动不了,启动后又停止,80 端口也没有被占用,也下载了 vc9  运行库,还是不行,后来找了半天,中文路径的问题

  4. Java 中的几个算法

    一.冒泡排序.插入排序.希尔排序.快速排序与归并排序 效率概要: 冒泡排序是蛮力法,使用两层嵌套循环,基本效率为 O(n^2) 插入排序是减治法,第一趟排序,最多比较一次,第二趟排序,最多比较两次,以 ...

  5. 给table加边框的样式

    <style> .tb { width: 1600px; text-align: center; border-collapse: collapse; } .tb tr td { bord ...

  6. 对象copy的两种方式--序列化--clone

    对象实现copy有多中方式,最土的方法就是直接new,然后塞值,不过这种方法是真的low,下面着重说说Object类中的clone() 和 序列化反序列化copy Object 中 clone的方法 ...

  7. Access无法启动应用程序,工作组信息文件丢失,或是已被其他用户已独占方式打开

    使用SQL Server导入有密码的Access数据库内容,连接时出现错误提示: Access无法启动应用程序,工作组信息文件丢失,或是已被其他用户已独占方式打开 参考百度信息,可以点上图中的高级,在 ...

  8. vb中的sortedList和java中的

    vb中sortedList集合了数组和散列表的特征,可以像数组,ArrayList等索引获取值,也可以像hashtable,hashmap等散列表通过键值对获取值

  9. Ubuntu 18.04 安装Docker

    第一种方法从Ubuntu的仓库直接下载安装: 安装比较简单,这种安装的Docker不是最新版本,不过对于学习够用了,依次执行下面命令进行安装. $ sudo apt install docker.io ...

  10. 17.0-uC/OS-III消息管理

    消息传递 有些情况下任务或ISR与另一个任务间进行通信,这种信息交换叫做作业间的通信. 可以有两种方法实现这种通信: 全局变量. 发送消息. 1.果使用全局变量,任务或ISR就须确保它独占该变量.如果 ...