为什么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。都得到了相同的结果。为什么？ DEMO on jsfiddle

Answer 1

宽度实际上是96px。

.3 * 320 = 96

您将通过33.33

接近您想要的内容

http://jsfiddle.net/s2Lbm/

Answer 2

因为100/3 = 33.33333所以将宽度设置为33.33％