1

プレーンなhtmlとcssを使用して簡単なレイアウトを作成しようとしました:

<div class="container">
    <div class="left">
        <div class="top bordered"></div>
        <div class="bott bordered"></div>
    </div>
    <div class="right bordered">
    </div>
</div>

.container {height: 500px; background-color: #eeeeee;}
.left {float: left; width: 49%; height: 80%; position: relative;}
.right {float: right; width: 50%; height: 80%;}
.bordered {border: 1px solid #aaaaaa; border-radius: 5px;}
.top {height: 20%; width: 100%; position: absolute; bottom: 0;}
.bott {height: 30%; width: 100%;}

http://jsfiddle.net/SLfHf/をご覧ください。2 つの下枠 (左右) を同じ高さに表示したい。しかし、ご覧のとおり、左の方が少し高くなっています。これを調査したところ、パディングやマージンがなくても、子の境界線が親の境界線と重ならないことがわかりました。質問は次のとおりです。なぜですか？

4

2 に答える 2

4

ボックスの高さ/幅内に境界線を含めたい場合は、次を使用する必要があります。

box-sizing:border-box;

http://www.w3.org/TR/css3-ui/#box-sizing0 (プレフィックスが必要な場合があります:))

于 2013-07-19T13:40:32.210 に答える