如何padding-top作为一个百分比与父的宽度相关？

问题描述

以下是一个示例：

注意所有红色div是否相同 height 并有 padding-top：100％; ，但他们A& B具有不同的填充大小...并且看起来父级的宽度会更改此值（请注意，C会更改父级的 height

Notice how all of the red divs are the same height and have padding-top:100%;, yet they A & B have different padding sizes... and it appears that the width of the parent changes this value (note that C changes the height of the parent, yet that doesn't alter the padding).

为什么padding以这种方式与宽度相关？

Why is padding related to width in this way?

>编辑：出于历史原因，如果jsfiddle不见了，我在我的例子中使用的代码如下...

for historical reasons, and in case jsfiddle goes away, the code I used in my example is as follows...

HTML：

<div class='outer'>
    <div class='middle'>
        A
      <div class='inner'>
      </div>
    </div>
</div>

<div class='outer' style='width:100px'>
    <div class='middle'>
        B
      <div class='inner'>
      </div>
    </div>
</div>

<div class='outer' style='height:400px'>
    <div class='middle'>
        C
      <div class='inner'>
      </div>
    </div>
</div>

CSS：

.outer {
    background-color: green;
    height: 300px;
    width: 70px;
    float: left;
    margin-right: 10px;
}

.middle {
    background-color: red;
    height: 100px;
    width: 50px;
    padding-top: 100%;
}

.inner {
    background-color: blue;
    height: 3px;
    width: 100%;
}

推荐答案

http://stackoverflow.com/questions/10629294/css-fluid-layout-margin-top-based-on-percentage-grows-when-container-width-incr\"> CSS流体布局：margin-top基于百分比增长当容器宽度增加时：

From CSS fluid layout: margin-top based on percentage grows when container width increases :

：

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Value:      <padding-width> | inherit
Initial:    0
Applies to:     all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited:      no
Percentages:    refer to width of containing block
Media:      visual
Computed value:     the percentage as specified or the absolute length

这篇关于如何padding-top作为一个百分比与父的宽度相关？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！