％把元素放在容器外面，同樣的px寬度讓它在裏面

我有一個div，我試圖放置在另一個div內。粉紅色的div是容器，紅色的div是我的。我的div包含一個寬度爲44px的內部div。我的div的css屬性是float: right,text-align: center,box-sizing: border-box和border-collapse: collapse。當我設置width: 44px，我得到以下結果：％把元素放在容器外面，同樣的px寬度讓它在裏面

enter image description here

當我設置width: 15%，但是，盒子浮到屏幕的邊緣，而不是到包含div的邊緣。這兩張照片之間沒有其他屬性正在改變。

enter image description here

，這是什麼行爲，如何解釋呢？

的jsfiddle：如何在百分比寬度的工作http://jsfiddle.net/xU9RV/

來源

2014-07-03 Andrew Latham

如果你可以提供HTML以及更多的CSS（容器div和更多），那將會容易得多。越多越好。你也可以把它放在jsfiddle中，這樣我們就可以看到問題的存在。 – Hoshts

增加了jsfiddle。 –

最裏面的div大於15％div，導致它溢出容器。 – numbers1311407

一個重要方面是，它們依賴於父元素的寬度。

<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％。

所以，當使用寬度時，請務必記住，百分比取決於父寬度。

來源

2014-07-04 00:50:48 Hoshts

％把元素放在容器外面，同樣的px寬度讓它在裏面

回答

相關問題