解决space-between最后一排问题
display:flex + justify-content: space-between 能够实现2端对齐的布局,这种布局在网页中很常见。不过这种布局方式有一个问题。举个例子,我们假设现在一排放4个图片,而我们数据库里面总共只有6张,此时布局结果如下:
第二排数量少于4张,2端对齐就出现上图这种局面了。
我们如何处理这种问题呢?
用我们的::after处理一下即可~
.list-gallery{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-left: -10px;
}
.list-gallery::after {
content: "";
flex: auto;
}
.list-dynamic-gallery>div {
margin-left: 10px;
margin-bottom: 10px;
width: -webkit-calc((100% - 10px*4)/ 4);
width: calc((100% - 10px*4)/ 4);
}
.list-gallery是包裹图片列表的div,css这样写就能实现每行4张图片的效果了~
解决space-between最后一排问题的更多相关文章
- java.lang.OutOfMemoryError: PermGen space及其解决方法
PermGen space的全称是Permanent Generation space,是指内存的永久保存区域OutOfMemoryError: PermGen space从表面上看就是内存益出,解决 ...
- Tomcat报java.lang.OutOfMemoryError: Java heap space错误停止运行如何解决
最近开发的一个商业项目,部署完成后,经常出现Tomcat挂掉的现象,报的异常是:java.lang.OutOfMemoryError: Java heap space,上网google了一下,了解了一 ...
- <<< PermGen space溢出解决方法
错误信息中的PermGen space的全称是Permanent Generation space,是指内存的永久保存区域.还没有弄明白PermGen space是属于非堆内存,还是就是非堆内存,但至 ...
- Spark java.lang.outofmemoryerror gc overhead limit exceeded 与 spark OOM:java heap space 解决方法
引用自:http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece7631046893b4c4380146d96864968d4e414c42246 ...
- 【解决方法】安装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盘),然后 ...
- java.lang.OutOfMemoryError: Java heap space解决方法
引起java.lang.OutOfMemoryError: Java heap space异常,可能是由JAVA的堆栈设置太小的原因 根据网上的答案大致有以下两种解决方法: 1.在D:/apache- ...
- 【转】java.lang.OutOfMemoryError: Java heap space的解决
原文地址:http://blog.sina.com.cn/s/blog_4b12778b0100v0bb.html Myeclipse下java.lang.OutOfMemoryError: Java ...
- gzip: stdout: No space left on device问题的解决
一.问题描述 最近安装了ubuntu14.04,并在ubuntu14.04中编译了一次内核.这之后大部分情况下用sudo apt-get install 安装应用都会出现“gzip: stdout: ...
- [转]java.lang.OutOfMemoryError: PermGen space及其解决方法
原文地址:http://peak.iteye.com/blog/52606 这个问题是我的工程中加入了Birt报表在Linux环境下运行出现的问题,从网上搜索了一下看到这文章发现并不是由于Birt的原 ...
- No space left on device 解决Linux系统磁盘空间满的办法
最近Linux电脑在执行mvn时候总是报错: No space left on device 原因是磁盘空间满了,我马上加了20G的硬盘容量,但是还是报错,上网查了一下,发现了解决方法,我用了其中 ...
随机推荐
- 潭州课堂25班:Ph201805201 爬虫高级 第九课 scrapyd 部署 (课堂笔记)
c rapyd是 scrapy 的部署, 是官方提供的一个爬虫管理工具, 通过他可以非常方便的上传控制爬虫的运行, 安装 : pip install scapyd 他提供了一个json ,web, s ...
- python正则表达式(三)
表示边界 示例1:$ 需求:匹配163.com的邮箱地址 #coding=utf-8 import re # 正确的地址 ret = re.match("[\w]{4,20}@163\.co ...
- Wooden Sticks [POJ1065] [DP]
Description 有N根木棍等待处理.机器在处理第一根木棍时需要准备1分钟,此后遇到长宽都不大于前一根木棍的木棍就不需要时间准备,反之则需要1分钟重新准备.比如木棍按照(3,3).(1,3).( ...
- 最短路:spfa算法
板子补完计划绝赞继续中( 这篇博客就来写一写spfa(这我居然板子都打错了一次,我太弱啦!) 先来看一下定义:(引自http://blog.csdn.net/juststeps/article/det ...
- IIS 日志分析工具:Log Parser Studio
1.安装Log Parser,下载地址:http://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=24659 ...
- 微信公众号开发之通过获取token等信息
<?php /** * 发送post请求 * @param string $url * @param string $param * @return bool|mixed */ function ...
- ios真机中Text组件出现多余边框
问题 ios真机中Text组件出现多余边框(模拟器不会出现,真机会出现该问题). 原因 在ios启动页设置中,预设的尺寸要求与设置中图片尺寸不符合导致屏幕精度计算出现问题(启动屏分辨率错误设置会导致手 ...
- list utilities监视数据库前滚操作
您可以使用 db2pd 或 LIST UTILITIES 命令来监视数据库前滚操作的进度. 过程 发出 LIST UTILITIES 命令并指定 SHOW DETAIL 参数 db2 LIST UTI ...
- angular学习笔记(5)- 路由
angular1学习笔记(5)- 路由 需要前端路由的原因: 1.ajax请求不会留下History记录 2.用户无法通过URL进入应用中的指定页面(保存书签.链接分享给朋友) 3.ajax对SEO是 ...
- GMA Round 1 数列求和(Hard)
传送门 数列求和(Hard) 在数列{$a_n$}中,$a_1=-\frac{1}{4}$,$\frac{1}{a_{n+1}}+\frac{1}{a_n}=\begin{cases}-3(n为偶数) ...