CSS 填充百分比

Question

我刚刚注意到一些非常奇怪的东西，看看这个 fiddle .有两个高度不同的容器。两个容器的元素都设置为 10% 的垂直填充，这在逻辑上意味着较短的容器的元素应该彼此靠近。令人惊讶的是，事实并非如此。有人可以向我解释这种行为吗，我想知道是否可以安全地说无论 parent 的高度如何，百分比填充的值 ( px ) 都是恒定的？

HTML:

<div class='foo'>
    <div>foo</div>
    <div>foo</div>
</div>
<div class='bar'>
    <div>bar</div>
    <div>bar</div>
</div>

CSS:

.foo, .bar { display:inline-block; border:solid black 1px; }

.foo { height: 200px; }
.foo > div { padding-top: 10%; }

.bar { height:300px; }
.bar > div { padding-top: 10%; }

Answer 1

基于宽度的百分比填充，因为您的宽度相同，它们将相同。尝试像这样添加等于高度的宽度:

.foo, .bar { display:inline-block; border:solid black 1px; }

.foo { height: 200px; width: 200px; }
.foo div { padding-top: 10%; }

.bar { height:300px; width: 300px; }
.bar div { padding-top: 10%; }

查看 fiddle :http://jsfiddle.net/a98tJ/8/

希望这对您有所帮助。