1

ウィンドウのサイズを変更すると絞られる流体ボックスを作成しようとしています。

しかし、これは何が起こっているのですか：

ウィンドウのサイズを変更すると、4 番目のボックスが下に移動し、ボックスの幅が縮小します。4 番目のボックスが下に移動するのはなぜですか? 私は何を間違っていますか？

これが何が起こっているかです： http://www.dinkypage.com/169785

ソースは次のとおりです。 http://pastebin.com/raw.php?i=4ZbbXxCq

助けてください

4

2 に答える 2

2

を使用する必要がありますbox-sizing: border-box。これは、フローティング div 要素のそれぞれに割り当てた 10 ピクセルのパディングが、割り当てた 25% の幅の上に追加されるためです。そのため、4 つのフローティング div すべての幅の実際の合計は 100% を超えます (実際には、 100% + (2*10px)*4 = 100% + 80px になります。

このbox-sizing: border-boxプロパティは、要素に設定した高さと幅に、パディング (ある場合) や境界線の幅 (ある場合) も含まれるようにします。

実際、ポール・アイリッシュの推奨事項を次のように使用することをお勧めします。

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

高さも明示的に宣言されているため、コンテナの高さを変更して、ボックス モデルの変更を反映させたい場合があります。30px の上部パディングがあり、240px の高さの一部として計算されるため、高さを 240px + 30px (上部パディング) + 10px (下部パディング) = 280px に変更する必要があります。

于 2013-04-08T08:30:43.193 に答える
2

これは、width: 25%4 つのブロックすべてに を指定したためですが、それらにも 'padding: 10px' を指定したため、明らかに幅が100%.

パディングを削除するか、ブロックの幅をパディングの全長より短くする必要があります。たとえば、22%

于 2013-04-08T08:33:23.540 に答える