解决 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