百分比浮動網格佈局子像素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

回答

相關問題