相信大家肯定都碰到過這樣的需求：

可能設計圖是這樣的

先來簡單分析一下這裡的幾點要求

• 八張圖片水平排列
• 圖片之間固定間隔
• 圖片大小相同
• 總寬度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背景色相同的顏色)