Question

我正在尝试构建一个相对基于当前DOM大小的UI。我是通过大量使用百分比来做到这一点的。

我要做的一件事就是在填充顶部的绝对容器内渲染节点：％。

％计算的大小对我来说完全不合适。我不确定％是基于什么数字，但它肯定不是父节点。但是，在同一dom层次结构中使用固定像素填充工作正常。

    <div style="display:inline-block;width:600px;border:solid 1px black;position:absolute; top:10%; width:30%; height:40%;">
    <div style="border:solid 1px blue;height:20px;margin-top:20%"></div>
</div>
<div style="display:inline-block;width:600px;border:solid 1px black;position:absolute; left:160px;top:10%; width:30%; height:40%;">
    <div style="border:solid 1px blue;height:20px;margin-top:48px"></div>
</div>

左侧节点使用％padding，右侧节点使用固定像素填充。它们应该相同但％填充完全关闭。

有什么想法吗？我觉得我在这里缺少一些基本的东西。

Answer 1

margin-top: 20%指定一个上限，它是包含元素宽度的20％。我从你的代码中看到，包含元素的宽度是600px。因此，上边距为120px。而在正确边距的情况下，它仅为48 px。这就是他们不相同的原因。

Answer 2

是的，你这样做:)。

垂直边距或填充将父级宽度作为参考使用％时：http://www.w3.org/TR/CSS2/box.html#padding-properties＆amp; http://www.w3.org/TR/CSS2/box.html#propdef-margin-top

CSS - 填充百分比与填充像素

2 个答案: