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

Question

我只有一个 CSS 网格。宽度是百分比，高度是padding-bottom（也是百分比）。

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

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

解决办法是创建 'rows' 来环绕这两个部分，但由于它们是从外部源生成的，所以这是不可能的。

也许 padding-bottom 不是这样做的方法..欢迎提出建议。我试过 JS 选项同位素，但它有同样的问题。

.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

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

.grid-item:nth-child(4) {
  clear: both;
}

https://jsfiddle.net/bwxft9d4/

问题好像出在第一个要素上。如果你给 padding-bottom:67.9% 它也有效..

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

Percentage floated grid layout sub-pixel bug

html

css

grid-layout

css-float