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

推荐阅读

  1. SuiteCRM安装后CSS样式问题
  2. WordPress文章列表没有缩略图就显示默认图片
  3. 如何在SuiteCRM列表页添加自定义动作按钮?
  4. 网站更换域名必须要做这10项前期准备【SEO知识】
  5. CSS display 属性:display:inline;的作用是什么?
  6. PS切片后如何保存为DIV+CSS布局
  7. DedeCMS迁移后登陆不上:提示你的用户名不存在
  8. Ubuntu 20.04一键安装ISPconfig3【默认已安装各php版本】

发表评论

电子邮件地址不会被公开。 必填项已用*标注