.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. Ubuntu 10.04下架设流媒体服务器

    Ubuntu 10.04下架设流媒体服务器 个人建议:使用DarwinStreamingSrvr5.5.5,因为DarwinStreamingSrvr6.0.3安装过程中有很多问题需要解决! 目前主流 ...

  2. MySQL-监控告警系统

    开源地址: https://github.com/ycg/mysql_web QQ: 779647966 Email: ycg166911@163.com 利用python的flask进行后台开发,前 ...

  3. Thread类的join()方法

    public class Demo { /** * Thread类的join()方法 * -------------------------------- * 1)join() * 2)join(lo ...

  4. 在IE中启动火狐——自定义浏览器链接协议

    有时候需求就是这么奇葩,特别是在这个浏览器混战收尾的节骨眼上,有的客户正在将全单位的浏览器统一到Chrome.有的正在统一到Firefox.还有的正在统一到360上.于是就有了如题的需求,客户正在将浏 ...

  5. iOS 调试大法

    本文转载至 http://www.jianshu.com/p/d19e19a91071 0.笨办法 看变量.对象?NSLog+重新编译运行:改某对象?改源码+重新编译运行:隔离某个方法?在方法中写 r ...

  6. java基础---->String中replace和replaceAll方法

    这里面我们分析一下replace与replaceAll方法的差异以及原理. replace各个方法的定义 一.replaceFirst方法 public String replaceFirst(Str ...

  7. 11.9luffycity(4)

    2018-11-9 17:57:09 明天开始自己独立写luffy部分表的接口, 越努力,越幸运!永远不要高估自己! 明天后天先不想下看视频,把接口做完,然后整理一下笔记,温故而习之,可以为师啊! 知 ...

  8. react withClamp装饰器

    Clamp.js 等待异步数据加载完后在初始化$clamp withClamp.js import React, { Component } from "react"; expor ...

  9. mac 初次配置apache,及mac下安装mysql

    先打开apache,在浏览器上输入  localhost     回车后会如果屏幕上显示:It works! 如下图: 这说明你的apache已开启 mac 下apache配置(mac自带apache ...

  10. 静态方法(staticmethod)和类方法(classmethod)

    类方法:有个默认参数cls,并且可以直接用类名去调用,可以与类属性交互(也就是可以使用类属性) 静态方法:让类里的方法直接被类调用,就像正常调用函数一样 类方法和静态方法的相同点:都可以直接被类调用, ...