0

JSFIDDLE

内部に 4 つの div を持つラッパーがあり、それらはすべて左に浮かんでいて、1 行に並んでいます。ズームアウトすると、4 番目の div が一番下に落ちます。私が考えることができる唯一の問題は、ラッパーの幅が減少することです。そのため、4番目のものを含めることができなくなりますが、ラッパーの幅は固定されているため、問題ではないと確信しています。

html は次のとおりです。

<div id="wrapper">    
    <div id="panel">
        <div id="panel1" class="panelcell"></div>
        <div id="panel2" class="panelcell"></div>
        <div id="panel3" class="panelcell"></div>
        <div id="panel4" class="panelcell"></div>
        <div class="spacer" style="clear: both;"></div>
    </div>
</div>

そしてここにcssがあります：

#wrapper{
    width: 1280px;
}
#panel{
    width:100%;
}

#panel .panelcell{
    width: 318.75px;
    height: 213px;
    float: left;
    border-right: 1px solid white;
}

.panelcell {
    background-color: gray;
}

#panel1{
    border-right: 1px solid white;
}
4

3 に答える 3

1

問題の根本は、ズームアウトしたときにブラウザが「318.75px」の幅をレンダリングする方法にあると思います（画面に0.75pxをレンダリングできないため）。ズームアウトに合わせて要素を拡大縮小する際の丸め方によっては、要素の幅が最終的に親要素の幅よりも大きくなり、最後の浮動要素が新しい行にプッシュされる可能性があります。

これを解決する方法 (私が考えることができる) は、10 進数のピクセル幅ではなく、パーセンテージ幅を使用することです。の定義#panel .panelcellをこれに変更すると、探しているものが得られます。

#panel .panelcell{
    width: 25%;
    height: 213px;
    float: left;
    border-right: 1px solid white;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

要素のbox-sizing: border-box25% の幅を決定するときに、1px の境界線も考慮されるようにします。これが何を達成するかを示すために更新された JSFiddleを次に示します。(ズームアウトしても、4 番目の要素が新しい行に分割されないようにする必要があります。) これが探していたものではない場合は、お知らせください。さらにお手伝いさせていただきます。

于 2013-08-07T18:24:02.537 に答える
0

幅が 1280 を超えている、border-right 1px solid に問題があるようです。

于 2013-08-07T18:02:21.943 に答える