CSS实现多列图片等宽等间距排列

网站开发进行前端设计的时候,我们通常要对列表页进行布局设计,布局设计中最重要的一个步骤就是使用CSS对列表进行等距离排列。

如下图,我们有4列图片,希望他们之间的间距是相等的,如何实现这个效果呢?

CSS等间距排列列表页
CSS等间距排列列表页

一开始肯定会考虑到使用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等间距排列列表页
CSS等间距排列列表页

参考网址:https://www.jb51.cc/css/456641.html

滚动至顶部