浮动网格布局子像素错误百分比

Question

我只有一个CSS网格。宽度是百分比，高度是填充底部（也是百分比）。

子像素窗口宽度是问题 - 在偶数宽度上它看起来很棒，在奇数上，底部正方形项目错误堆叠。

下面有截图，我创建了FIDDLE。

修复方法是创建围绕这两个部分的“行”，但这些部分是从外部源生成的，这是不可能的。

也许padding-bottom不是这样做的方式......接受建议。我已经尝试过JS选项Isotope，但它有同样的问题。

.grid {
  display: block;
  background-color: #fff;
  margin: 20px 200px;
}

.grid-item {
  height: 0;
  float: left;
  position: relative;

  span {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    background-color: #c7c7c7;
  }

  &.type-1 {
    width: 50%;
   padding-bottom: 68%;
  }

  &.type-2 {
    width: 50%;
    padding-bottom: 34%;
  }

  &.type-3 {
    width: 33.33%;
    padding-bottom: 33.33%;
  }
}


<div class="grid">
  <div class="grid-item type-1"><span></span></div>
  <div class="grid-item type-2"><span></span></div>
  <div class="grid-item type-2"><span></span></div>
  <div class="grid-item type-3"><span></span></div>
  <div class="grid-item type-3"><span></span></div>
  <div class="grid-item type-3"><span></span></div>
</div>

Answer 1

如果网格将保持该布局，您可以尝试：

padding-bottom:67.9%

https://jsfiddle.net/bwxft9d4/

问题似乎是第一个因素。如果你给它asciidoctor它也有效..