Question

这很奇怪，我很惊讶以前从未遇到过这个问题。

基本上我有一个父div的全宽。然后我有一个内部div，具有固定宽度/最大宽度设置。这个div通过margin：auto。

集中

我希望这个内部div有％填充，比方说50％。问题是这个50％没有被表示为300px，而是50％的父元素。我真的没见过这种行为......

如果我在PX中设置填充，在这种情况下为300px，则按预期工作。

任何想法可能是什么问题？

.content {
 background: gray;
 padding: 60px 0;
}
.inner{
 width:600px;
 margin:0 auto;
 background:red;
 //padding-left:300px;
 padding-left:50%;
}

以下是问题的示例：http://jsfiddle.net/qD246/1/

顺便说一句，我正在使用box-sizing：border box。

Answer 1

据我了解，这就是相对单位的运作方式。填充是某事物的百分比，因此它必须有一个参考点，即父元素。它不是屏幕百分比作为普遍规则。

Answer 2

如果您在P标签上应用填充，则可以正常工作。

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.content {
background: gray;
padding: 60px 0;
}
.inner{
    width:600px;
    margin:0 auto;
    background:red;

}
.inner p{
        padding-left:50%;
}

DEMO：http://jsfiddle.net/qD246/2/

内部元素填充占父项的百分比

2 个答案: