[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