％width将元素放在容器外部，相同的px宽度将其保持在内部

Question

我有一个div，我试图放在另一个div内。粉色div是容器，红色div是我的。我的div包含一个44px宽的内部div。我的div的css属性是float: right，text-align: center，box-sizing: border-box和border-collapse: collapse。当我设置width: 44px时，我得到以下结果：

但是，当我设置width: 15%时，框会浮动到屏幕边缘而不是包含div的边缘。这两张照片之间没有其他财产被改变。

这种行为的解释是什么？

JsFiddle：http://jsfiddle.net/xU9RV/

Answer 1

宽度百分比如何工作的一个重要方面是它们取决于父元素的宽度。

<div style="width: 100px; height: 100px; background-color: blue;">
  <div style="float: right; width: 15%; background-color: pink;">
    <div style="width: 44px; height: 44px; background-color: red;">
    </div>
  </div>
</div>

正如您在此处的代码中所看到的，您将第一个div设置为100px宽。第二个div设置为15％，百分比取决于父宽度，它只有15px宽。因此，当第三个div具有44px宽度时，它将溢出父容器并显示为好像它在第一个div之外的一半。

要获得与像素值相同的百分比宽度，您必须使用父素为100px的44％。

因此，在处理宽度时，请务必记住百分比取决于它的父级宽度。