解決 33.3% 佈局小數寬度引發的間隙

CSS 中有個需求很常見，實現圖片列表，無論用傳統的 Float 佈局，仍是現代的 Flex 佈局，作自適應時總會用到寬度 33.3%，若是圖片中間有間隙，那倒沒啥難度。若是要求圖片嚴絲合縫，像這樣：

在線效果：caiyidong.com

就會遭遇一個問題，寬度 33。3% 極有可能在某些瀏覽器寬度下，令 DIV 寬度爲小數，此時因爲瀏覽器沒法渲染如此精度，致使間隙出現：

通過一頓操做，終於發現解決方案，只要讓內部圖片 DIV 寬度增大，超出外層 DIV，而外部 DIV 設置屬性 overflow: hidden，這樣即便寬度出現小數，圖片仍然會佔滿整個屏幕：

.wrap
    width: 33.3%

    &>div
      width: calc(100% + 2px)
複製代碼

因爲 img 是經過 padding-bottom 佔位，absolute 的方式充滿子 DIV，因此寬度也是 calc(100% + 2px)，下面是見證奇蹟的時刻了：

原文地址：wenboz.com/p/b25a.html