[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

阅读更多
想对作者说点什么?

博主推荐

换一批

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