0

.container一連の 100% div (それぞれに独自の div が含まれる) を含むページを作成しようとしていますが、長い単一ページのデザインになります。ただし、から境界線を削除すると.container、それらはすべて崩壊します。

これがなぜなのか、誰にもわかりますか？

  .container {

        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: block;
        border: 1px solid salmon;

    }

html, body {

    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    font-size: 10pt;
    letter-spacing: 1px;
    /* overflow: hidden; */
}

編集: を.containerからdisplay:block;に変更しdisplay:inline-block;、これで問題が解決しました。なぜこれができるのか誰にも分かりますか？

4

1 に答える 1

0

同様の質問に対するユーザーsplattneによる回答。

====

<span>内の要素を想像してください<div>。たとえば、<span>要素に 100px の高さと赤い境界線を指定すると、次のようになります。

表示: インライン

表示: インライン

表示: インラインブロック

表示: インラインブロック

表示ブロック

ここに画像の説明を入力

コード: http://jsfiddle.net/Mta2b/

より詳しい情報：

display: block コンテナ内の他のオブジェクトを強制的に新しい行に移動さ
せ、スペースを作成してデザインを崩壊させます。divdivs

display: inline-block 他のものと同じ行
に表示しようとしますが、すべて持っているため、水平方向に整列していても、垂直方向に次々と表示されます。divdivsdivswidth:100%

于 2013-08-09T13:23:28.597 に答える