css实现正方形，即宽度为百分比，高度与宽度相同的布置方式

这是开发中遇到的一个问题：一组图片列表，每行展示5个，图片宽度按照页面宽度的20%设置，然后高度与宽度相同，也就是展示为正方形，该如何用css设置呢？

推荐下我的前端群：524262608，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括我自己整理的一份最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙伴。

这里需要用到伪元素：before，如下是html

<div class="box"><div class="content diff"><div class="img">假设这是图片

<br>就是这个div</div></div>

<div class="content"><div class="img">假设这是图片

<br>就是这个div</div></div>

<div class="content diff"><div class="img">假设这是图片

<br>就是这个div</div></div><div class="content"><div class="img">假设这是图片

<br>就是这个div</div></div><div class="content diff"><div class="img">假设这是图片

<br>就是这个div</div></div><div class="content"><div class="img">假设这是图片

<br>就是这个div</div></div><div class="content diff"><div class="img">假设这是图片

<br>就是这个div</div></div><div class="content"><div class="img">假设这是图片

<br>就是这个div</div></div><div class="content diff"><div class="img">假设这是图片

<br>就是这个div</div></div><div class="content"><div class="img">假设这是图片

<br>就是这个div</div></div><div class="content diff"><div class="img">假设这是图片

<br>就是这个div</div></div><div class="content"><div class="img">假设这是图片

<br>就是这个div</div></div><div class="content diff"><div class="img">假设这是图片

<br>就是这个div</div></div><div class="content"><div class="img">假设这是图片

<br>就是这个div</div></div><div class="content diff"><div class="img">假设这是图片

<br>就是这个div</div></div></div>

下面是css

.box { background: lightblue; width: 500px;}

.content { width: 20%; height: 100%; float: left; background: inherit; position: relative;}

.content:before { content: ""; padding-top: 100%; vertical-align: middle; 

/* 这是关键，否则图片下方会超出一条缝 */display: block;}

.diff { background: lightpink;}

.content .img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; 

/* 下面没有用，只是看着好看 */font-size: 12px; color: darkgray; text-align: center; padding-top: 30px;}

css设置:before的padding-top为100%以及dispaly为block就可以形成一个正方形的空白，然后将外层设置relative，图片absolute，然后高宽100%，这样就可以形成一个正方形的图片了。

需要注意的是:before一定要设置vertical-align为middle，否则有可能图片下方会超出正方形的区域…

另外，.content我是用的float:left来排列，如果使用inline-block也可以，只是将代码换行书写会造成每个.content之间有缝隙，这时可以网上搜索“display block 间隙”查找解决方法，此处不再赘述。

web前端教程qun，189394454，每天都会有干货分享

关注公众号→‘学习web前端’开启你的web前端学习之路