实现等分的宽度高度相同的自动换行图片展示

效果图：

思路：

1.容器中的每个图片容器占25%，超过100%后自动换行

2.使图片的高度与宽度一致

3.图片容器添加内边距，使图片有分隔感

实现：

针对思路1，在移动端网页下首选使用

display: flex;

来实现图片容器的横向自适应宽度。给每个容器25%的宽度（根据每行几个容器计算）。

或者可以使用子容器浮动设置宽度并清除浮动的方式实现思路1。

.parent:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.parent{zoom: 1;}
.child{float:left;width: 25%;}

此时遇到一个问题就是如何让每个容器的高度与宽度相同？

我们知道，在css中，

padding

其中padding的%的值是根据宽度来计算的，所以我们可以将padding-top（或padding-bottom）设置为与宽度相同，在此例中

padding-top: 25%;

这样我们就能得到一个宽高相同的方块状容器。将该容器设置为

position： relative;

那么将每个图片容器设置为：

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 5px;

这样就可以实现效果图的效果了。