display:flex + justify-content: space-between 能够实现2端对齐的布局，这种布局在网页中很常见。不过这种布局方式有一个问题。举个例子，我们假设现在一排放4个图片，而我们数据库里面总共只有6张，此时布局结果如下：

第二排数量少于4张，2端对齐就出现上图这种局面了。

我们如何处理这种问题呢？

用我们的::after处理一下即可~

  1. .list-gallery{
  2.     display: flex;
  3.     flex-wrap: wrap;
  4.     justify-content: space-between;
  5.     margin-left: -10px;
  6. }
  7. .list-gallery::after {
  8.     content: "";
  9.     flex: auto;
  10. }
  11. .list-dynamic-gallery>div {
  12.     margin-left: 10px;
  13.     margin-bottom: 10px;
  14.     width: -webkit-calc((100% - 10px*4)/ 4);
  15.     width: calc((100% - 10px*4)/ 4);
  16. }
  1. .list-gallery是包裹图片列表的div，css这样写就能实现每行4张图片的效果了~

解决space-between最后一排问题的更多相关文章

  1. java.lang.OutOfMemoryError: PermGen space及其解决方法

    PermGen space的全称是Permanent Generation space,是指内存的永久保存区域OutOfMemoryError: PermGen space从表面上看就是内存益出,解决 ...

  2. Tomcat报java.lang.OutOfMemoryError: Java heap space错误停止运行如何解决

    最近开发的一个商业项目,部署完成后,经常出现Tomcat挂掉的现象,报的异常是:java.lang.OutOfMemoryError: Java heap space,上网google了一下,了解了一 ...

  3. <<< PermGen space溢出解决方法

    错误信息中的PermGen space的全称是Permanent Generation space,是指内存的永久保存区域.还没有弄明白PermGen space是属于非堆内存,还是就是非堆内存,但至 ...

  4. Spark java.lang.outofmemoryerror gc overhead limit exceeded 与 spark OOM:java heap space 解决方法

    引用自:http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece7631046893b4c4380146d96864968d4e414c42246 ...

  5. 【解决方法】安装Win7和linux双系统后，linux报错“无法分配所提交的分区 not enough free space on disks”问题，以及win7无法启动“BootMGR image is corrupt....”问题

    近日,在笔记本上重装了Win7 企业版(64位)后,想装个linux双系统,于是开始安装 centOS 6.2(光盘安装) 硬盘分了一个主分区(c盘),一个扩展分区(3个逻辑分区:d,e,f盘),然后 ...

  6. java.lang.OutOfMemoryError: Java heap space解决方法

    引起java.lang.OutOfMemoryError: Java heap space异常,可能是由JAVA的堆栈设置太小的原因 根据网上的答案大致有以下两种解决方法: 1.在D:/apache- ...

  7. 【转】java.lang.OutOfMemoryError: Java heap space的解决

    原文地址:http://blog.sina.com.cn/s/blog_4b12778b0100v0bb.html Myeclipse下java.lang.OutOfMemoryError: Java ...

  8. gzip: stdout: No space left on device问题的解决

    一.问题描述 最近安装了ubuntu14.04,并在ubuntu14.04中编译了一次内核.这之后大部分情况下用sudo apt-get install 安装应用都会出现“gzip: stdout: ...

  9. [转]java.lang.OutOfMemoryError: PermGen space及其解决方法

    原文地址:http://peak.iteye.com/blog/52606 这个问题是我的工程中加入了Birt报表在Linux环境下运行出现的问题,从网上搜索了一下看到这文章发现并不是由于Birt的原 ...

  10. No space left on device 解决Linux系统磁盘空间满的办法

    最近Linux电脑在执行mvn时候总是报错: No space left on device   原因是磁盘空间满了,我马上加了20G的硬盘容量,但是还是报错,上网查了一下,发现了解决方法,我用了其中 ...

随机推荐

  1. 2079 ACM 选课时间 背包 或 母函数

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2079 题意:同样的学分 ,有多少种组合数,注意同样学分,课程没有区别 思路:两种方法 背包 母函数 背包: ...

  2. [CC-MINXOR]XOR Minimization

    [CC-MINXOR]XOR Minimization 题目大意: 有一个长度为\(n\)的数列\(A_{1\sim n}\).\(q\)次操作,操作包含以下两种: 询问\(A_{l\sim r}\) ...

  3. VS2013配置OPENCV2.4.9

    转载自->这里 设置opencv SDK解压目录,点击Extract后解压 我是习惯于解压到这个位置的. 解压过程如上图. 2.         文件目录介绍 解压后会在目录下生成opencv的 ...

  4. nginx -s reload时出现open() "/run/nginx.pid" failed (2: No such file or directory)错误

    解决办法: 找到你的nginx.conf的文件夹目录,比如我的为/etc/nginx/nginx.conf,然后运行这个  nginx -c /etc/nginx/nginx.conf命令,  再运行 ...

  5. AtCoder Regular Contest 080 [CDEF]

    C - 4-adjacent Time limit : 2sec / Memory limit : 256MB Problem Statement We have a sequence of leng ...

  6. 部署前准备--使用Mysql之Django Debug Toolbar安装以及配置

    python -c "import django ;print(django.__path__);" 查看python的全局配置 vi /usr/local/lib/python3 ...

  7. css 文本超出n行就隐藏并且显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  8. [CentOS7]redis设置开机启动，设置密码

    简介 上篇文章介绍了如何安装redis,但每次重启服务器之后redis不会自启,这里将介绍如何进行自启设置,以及如何设置redis的密码,进行密码验证登陆. 上篇文章: Centos7安装Redis ...

  9. Springboot 之 多配置文件

    六.Springboot 之 多配置文件   说明:在程序开发过程中可能会有这样的需求:开发和部署的配置信息可能会不同,以传统的方式就是在配置文件里面写好配置,在部署的时候再去修改这些配置,这样肯定会 ...

  10. [CSS] Useful CSS tool for Web designer and developer

    1. Color Picker (Chrome) You might know how to use color picker in Chrome, recently there is a featu ...