纵横比 div 在另一个纵横比 div 内未按预期工作

Question

请问我的代码有什么问题吗？为什么内部 div(二) 填充外部 div 而不是保持其纵横比 padding-bottom?

.one {
  position: relative;
  background: #990000;
  background-size: contain;
}

.one:before {
  content: "";
  width: 1px;
  margin-left: -1px;
  float: left;
  height: 0;
  padding-bottom: 40%;
}

.one:after {
  content: "";
  display: table;
  clear: both;
}

.two {
  position: relative;
  top: 0;
  background: #009900;
}

.two:before {
  content: "";
  width: 1px;
  margin-left: -1px;
  float: left;
  height: 0;
  padding-bottom: 20%;
}

.two:after {
  content: "";
  display: table;
  clear: both;
}

<div class="one">
  <div class="two"></div>
</div>

https://jsfiddle.net/mhk99j8z/

Answer 1

这是因为你没有清除你的 one:before 浮动 - 你的 one:after 在两个之后 - :after 附加在元素的末尾（在所有其他元素之后）

.one {
  position: relative;
  background: #990000;
  background-size: contain;
}

.one:before {
  content: "";
  width: 1px;
  margin-left: -1px;
  float: left;
  height: 0;
  padding-bottom: 40%;
}
    
.two {
  clear:left;             /* remove one:after and clear on two */
  position: relative;
  top: 0;
  background: #009900;
}

.two:before {
  content: "";
  width: 1px;
  margin-left: -1px;
  float: left;
  height: 0;
  padding-bottom: 20%;
}

.two:after {
  content: "";
  display: table;
  clear: both;
}

<div class="one">
  <div class="two"></div>
</div>

纵横比 div 在另一个纵横比 div 内未按预期工作

aspect ratio div inside another aspect ratio div not working as intended

html

css

pseudo-element