相信大家肯定都碰到过这样的需求:
可能设计图是这样的
先来简单分析一下这里的几点要求
- 八张图片水平排列
- 图片之间固定间隔
- 图片大小相同
- 总宽度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>
css
* {box-sizing: border-box;}
.row .col {
float: left;
width: 12.5%;
background-color: #0f0;
border: 10px solid #fff;
}
效果图
这样,以后如果要更改间距,只要更改
border-width
即可了
原理
- 最基本的一点,要设置盒子模型为border-box,这样就能保证每一个col的宽度计算方式为content+padding+border,就算设置了padding或者border也不会影响总宽度。
- 其次,用边框(padding也可以)模拟间距(给边框设置与row背景色相同的颜色)