解决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的硬盘容量,但是还是报错,上网查了一下,发现了解决方法,我用了其中 ...
随机推荐
- JavaScript基础笔记(二)变量、作用域和内存问题
变量.作用域和内存问题 一.基本类型和引用类型的值 基本类型值:简单的数据段 引用类型值:由多个值构成的对象 基本类型是按值访问的,引用类型是按引用访问的. 不能给基本类型的值添加属性,尽管不会报错. ...
- LeetCode(867)
title: LeetCode(867) tags: Python Algorithm 题目描述 给定一个矩阵 A, 返回 A 的转置矩阵. 矩阵的转置是指将矩阵的主对角线翻转,交换矩阵的行索引与列索 ...
- BZOJ4966 : 总统选举
线段树维护每个点的最有可能是答案的数以及它的权重. 合并两个节点的时候,将权重互相抵消,保留较大的那一个. 得到答案后,再在对应权值的Treap中查询出现次数,检查是否真正是答案. 时间复杂度$O(n ...
- [P3625][APIO2009]采油区域 (前缀和)
这道题用二维前缀和可以做 难度还不算高,细节需要注意 调试了很久…… 主要是细节太多了 #include<bits/stdc++.h> using namespace std; #defi ...
- shell脚本使用--sleep
#!/bin/bash #filename.sh echo -n Count: tput sc count=; while true; do ]; then let count++; ; tput r ...
- Conscription [POJ3723] [最小生成树]
Description: Windy有一个国家,他想建立一个军队来保护他的国家. 他召集了N个女孩和M男孩,想把他们雇佣成为他的士兵. 要无偿雇佣士兵,必须支付10000元. 女孩和男孩之间有一些关系 ...
- 学习Struts--Chap06:Struts2之数据验证
1.数据验证的概述 1.1.数据验证的重要性 数据验证是非常必要的,不但和我们的常识性理解有关系,还有可能涉及到一些非法输入等问题,所以我们需要进行必要的数据验证,以保证我们在数据输入的时候都是正确且 ...
- css3的transform,translate和transition之间的区别与作用
transform 和 translate transform的中文翻译是变换.变形,是css3的一个属性,和其他width,height属性一样 translate 是transform的属性值,是 ...
- SSH报错
1.SSH 加入HQL查询时,报错 antlr.collections.AST.getLine()I 2.百度发现是 因为struts 和 hibernate红都有antlr-2.7.2.jar,但两 ...
- 201771010134杨其菊《面向对象程序设计java》第八周学习总结
第八周学习总结 第一部分:理论知识 一.接口.lambda和内部类: Comparator与comparable接口: 1.comparable接口的方法是compareTo,只有一个参数:comp ...