3

この単純な HTML5 レイアウトは、左側にナビゲーション バーを配置し、その横に本文テキストを配置することを目的としています (流動的でレスポンシブなデザインのために、ピクセルではなくパーセンテージを使用します。計算は CSS 内のコメントにあります)。

http://www.wturrell.co.uk/stackoverflow/20110615-01.html

「ページ」div 内の要素の幅は、正確に 100% になります。特定の要素 (この場合は nav) にパディングを追加したいと考えています。すべてのパディングを削除すると、それらは正しくフロートしますが、1 または 2 ピクセルを超えるパディング (指定されている単位に関係なく) が壊れます。これがパディングであるため、レイアウトが壊れている理由がわかりません。ブロックの全体的なサイズを変更してはいけませんか?

私は何を逃したのですか？

更新 - 解決策: http://www.wturrell.co.uk/stackoverflow/20110615-02.html

(要素の表示幅 = 幅+境界線+パディング。ナビゲーションは公称合計 200 ピクセルで、右側に 20 ピクセルのパディングがあるため、流動的なデザインの場合、幅 = 180/900*100 または 20%、パディング = 20/900*100 または 2.222 % で、本文は 700/900*100 または 77.777% のままです。)

4

4 に答える 4

7

まず、標準モードをトリガーするための Doctype を追加する必要があります。これがないと、ページでQuirks Modeが使用され、特に Internet Explorer で悪魔的な問題が発生します。

最初の行として追加します。

<!DOCTYPE html>

次に、ボックスモデルに関する@Alex Ciminianの答えは正しいです（のpadding一部とは見なされませんwidth）。widthを正確に の量だけ減らすか、次のいずれかを実行できますpadding。

使用box-sizing: border-box: https://developer.mozilla.org/en/CSS/box-sizing

paddingを の計算に含めたい任意の要素に追加しますwidth。

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

詳細については、http: //css-tricks.com/box-sizing/を参照してください。

このプロパティのブラウザ サポートは良好です: http://caniuse.com/css3-boxsizing - IE6/7 以外のすべての場所。

于 2011-06-15T12:30:40.267 に答える
6

CSS ボックス モデルでは、ボックス全体のサイズを取得するためにpaddingが に追加されます。widthあなたの場合、幅のパーセンテージの合計が 100% になると、1 ピクセルでもコンテンツがオーバーフローすることになります。

パディングをパーセンテージで設定し、それらを加算するときにそれを考慮に入れるか、端に 1 ～ 2 パーセントのバッファを残して小さなパディングをピクセル単位で追加してみてください。

于 2011-06-15T12:14:30.667 に答える
3

@williant; アレックスは正しい要素padding & borderに追加widthします。widthしたがって、に従って調整しpaddingます。

css：

#page nav {
    clear: both;
    display: inline;
    float: left;
    padding: 0 10% 0 0;
    width: 12.2222%;
}
于 2011-06-15T12:24:47.940 に答える
1

box-sizing: border-box;使用または設定max-width:100%および/またはを試すことができますmax-height:100%;。

css の max-width および max-height オプションは、互換性を維持したい場合に古いバージョンの IE と互換性があります。

編集：

以下のコードを使用して、ブラウザー間でボックスのサイズ変更を使用します。

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
于 2013-01-13T00:23:38.620 に答える