css - css `width:30%` が正しく動作しない理由

Question

答えてくれてありがとう、明らかに私は数学で恐ろしい間違いを犯しました...

これが私のコードです。

<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

<style>
div {
    overflow: hidden;
    width: 300px;
    background: blue;
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
    padding: 0;
    float: left;
    width: 30%;
    height: 100px;
    background: red;
}
</style>

レンダリング後、 の幅pは90pxではなく になり100pxます。Chrome、Safari、Opera、Firefox の最新バージョンでテストしました。すべて同じ結果になりました。なんで？ jsfiddle のデモ

Answer 1

幅は実際には 96px です。

.3 * 320 = 96

あなたが望むものに近づくでしょう33.33

http://jsfiddle.net/s2Lbm/

Answer 2

100/3 = 33.33333 なので、幅を 33.33% に設定します