[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

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

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试