html - 使用 CSS 网格在行中留出 1px 的间距

Question

我正在尝试制作自定义 CSS 网格:

.row
  box-sizing: border-box
  background-color: tomato
  font-size: 0
.row:after
  content: ""
  display: table
  clear: both
[class*="col-"]
  float: left
  min-height: 1px
  box-sizing: border-box
.col-1-4
  width: 25%
.col-3-4
  width: 75%
.col-2-3
  width: 66.66667%
.col-1-3
  width: 33.33333%

但是当我缩放页面时，行尾出现 1px 的间隙: Image

那么如何避免呢？

Answer 1

可能这只是一个舍入误差。另请参阅:Fixing Sub-Pixel rounding issue in a CSS Fluid Grid

您可以通过给一行中的最后一列 width: auto 来避免这种情况。