写这篇文章的目的。主要是今天要实现一个布局: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;
}

最新文章

  1. MYSQL实现主从复制
  2. windows环境PhpStorm中简单使用PHP_CodeSniffer规范php代码
  3. JSONP使用笔记
  4. 《深入理解Spark:核心思想与源码分析》正式出版上市
  5. ios ZBar扫二维码奇奇怪怪的错误
  6. win10启动文件夹:
  7. Longest Consecutive Sequence [LeetCode]
  8. Power Map 入门
  9. linux file命令小记
  10. 黑盒测试用例设计方法&理论结合实际 -> 判定表驱动法
  11. HTTP 304 Response
  12. Spring Test 整合 JUnit 4 使用
  13. 对比AutoResetEvent和ManualResetEvent
  14. try{}catch{}finally{}的手记
  15. 20175212童皓桢 《Java程序设计》第六周学习总结
  16. 在aspx中,如果要引用一个ID号,需要引用外层的ID号(内层的不行)
  17. mybatis源码解析之环境准备
  18. 在global.asax中启动定时任务
  19. Eclipse Indigo 3.7.0 安装GIT插件提示 requires 'bundle org.eclipse.team.core(转)
  20. swf 文件解析

热门文章

  1. 【转】jvm类加载
  2. Linux 压力测试及内存检测
  3. [leetcode]Add Two Numbers——JS实现
  4. HDU_1176_免费馅饼_16.4.23再做
  5. Linux 软件编译、安装、删除
  6. 安卓app测试之内存分析
  7. php file_get_contents函数分段读取大记事本或其它文本文件
  8. [转载] kprobe原理解析(一)
  9. 如何在MONO 3D寻找最短路路径
  10. libevent reference Mannual I