若晨工作室

交流探讨关于前端的知识文章,希望可以共同提高。

[CSS]图片水平排列并且有固定间隔

相信大家肯定都碰到过这样的需求:

可能设计图是这样的 
这里写图片描述

先来简单分析一下这里的几点要求

  • 八张图片水平排列
  • 图片之间固定间隔
  • 图片大小相同
  • 总宽度100%

demo

html

<div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

css

* {box-sizing: border-box;}
.row .col {
  float: left;
  width: 12.5%;
  background-color: #0f0;
  border: 10px solid #fff;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

效果图

效果图

这样,以后如果要更改间距,只要更改border-width即可了

原理

  • 最基本的一点,要设置盒子模型为border-box,这样就能保证每一个col的宽度计算方式为content+padding+border,就算设置了padding或者border也不会影响总宽度。

  • 其次,用边框(padding也可以)模拟间距(给边框设置与row背景色相同的颜色)

转载地址:https://blog.csdn.net/qq807081817/article/details/49099401

阅读更多
个人分类: css
上一篇CSS伪类选择器nth-child 选择3的倍数个元素写法
下一篇git merge 和 git rebase 小结
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭