浮動小数点グリッドレイアウトのサブピクセルバグ

Question

私はCSSのみのグリッドを持っています。幅はパーセンテージで、高さはパディング - ボトム（パーセントも含む）です。

サブピクセルのウィンドウの幅が問題です。偶数の幅では、奇数の場合、下の四角形のアイテムが重なって表示されます。

下記のスクリーンショットがあり、私はFIDDLEを作成しました。

修正は、2つのセクションを囲む '行'を作成することですが、これらは外部ソースから生成されるため不可能です。

おそらく、パディングボトムはそれを行う方法ではありません。提案に開放してください。私は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/

は、問題はそうあなたはブロック間のスペースをクリアdiv要素を追加することができます最初の要素になるようにします。あなたはそれを与える場合padding-bottom:67.9%それも動作します..

Answer 2

私の答えはいくつかは、古代に見えることがあります。グリッドはそのレイアウトを維持する場合は、あなたが試みることができる。ここ

.divider { 
    clear: both; 
} 

がJSFiddle