[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>

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背景色相同的顏色)