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

我有一个只有CSS的网格。宽度是百分比，高度是填充底部（也是百分比）。百分比浮动网格布局子像素bug

亚像素窗口宽度是问题 - 在偶数宽度上它看起来不错，奇数底部平方项目堆栈错误。

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

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

也许填充底部不是做这件事的方法..对建议持开放态度。我试过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>

来源

2016-12-02 Jake

如果电网会保持在这个布局，你可以尝试：

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

https://jsfiddle.net/bwxft9d4/

这个问题似乎成为第一个要素。如果你给padding-bottom:67.9%它也可以。

来源

2016-12-02 09:56:00 sol

布局将变得如此清晰并不理想 - 67.9％的修复似乎工作，所以感谢。我会在这里更新，如果我发现它有问题，但我刚刚测试了小提琴回到IE9，它看起来不错:) – Jake

我的回答可以看一些古代。您可以添加的div清除块之间的空间：

.divider { 
    clear: both; 
}

这里是JSFiddle

来源

2016-12-02 09:35:06 Banzay

这也是我的想法，但由于这些块来自用户设置的CMS，所以我不想让用户错误。但我可能不得不这样做。谢谢。 – Jake

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

回答

相关问题