网站开发进行前端设计的时候,我们通常要对列表页进行布局设计,布局设计中最重要的一个步骤就是使用CSS对列表进行等距离排列。
如下图,我们有4列图片,希望他们之间的间距是相等的,如何实现这个效果呢?
![CSS等间距排列列表页](https://www.louishe.com/wp-content/uploads/2021/06/css-case-1.png)
一开始肯定会考虑到使用padding或者margin来撑开图片与图片的间距,但是怎么设置值呢?
每个图片块左浮动,宽22%,左外边距2.5%。
那么(约等于100%)98%=22%*4+2.5%*4
img {
display: block;
width: 22%;
margin: 2.5% 0 0 2.5%;
float: left;
}
![CSS等间距排列列表页](https://www.louishe.com/wp-content/uploads/2021/06/css-case-2-1024x400.png)
参考网址:https://www.jb51.cc/css/456641.html