2

私は親 div と子を持っていdivます。100% に設定された子 div 幅。

どちらにも 2px の境界線があります。

奇妙なのは、子 div の左端が表示され、右端が親によって覆われているように見えることdivです。

子 div のマージンまたは親 div のパディングを変更してもうまくいかないようです。

子の幅を 100% よりも小さいサイズに変更することはうまくいくようですが、それをしたくなく、なぜそれが起こっているのかわからないのですか?

フィドル: http://jsfiddle.net/Boovius/8armB/2/

HTML

<body>
    <div id='parent'>
        <div class='child'></div>
    </div>
</body>

CSS

#parent {
    height: 550px;
    width: 400px;
    margin: 0 auto;
    border: 2px solid 
    overflow: scroll;
}
.child {
    width: 100%;
    height: 50px;
    border: 2px solid 
}
4

2 に答える 2

1

デフォルトでは、ボーダーは幅の計算に含まれます。幅またはボックス サイズ変更モードを変更 (または単に削除) します。

http://jsfiddle.net/isherwood/8armB/3/

.child {
    box-sizing: border-box;
}

http://css-tricks.com/box-sizing/

于 2013-10-04T20:53:15.873 に答える
1

display-property を変更しない場合、div はブロック要素としてレンダリングされるため、常に親要素の幅全体を埋めます。例がどれほど現実的かによって異なりますが、その場合は child の幅を削除してdivください。

http://jsfiddle.net/8armB/4/

于 2013-10-04T20:58:51.390 に答える