当使用相同的css类时，为什么我的两个盒子处于不同的高度？

Question

我无法理解为什么我的Flexbox并非都遵守相同的padding-bottom规则。只有一个班级通过padding-bottom申请高度。

＆＃13;

＆＃13;

.col-t {
  width: 100%
}

.col-s {
  width: 50%
}

main#container .grid .grid-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

main#container .grid .grid-container .box {
  -webkit-flex: 1 auto;
  flex: 1 auto;
  position: relative;
}

main#container .grid .grid-container .box>div {
  padding-bottom: 56.66666%;
}

.r {
  background: red;
}

.b {
  background: blue
}

.p {
  background: purple
}

＆＃13;

<main id="container">
  <section class="grid">
    <div class="col-s grid-container">
      <div class="col-t box">
        <div class="r">

        </div>
      </div>
      <div class="col-s box">
        <div class="b">

        </div>
      </div>
      <div class="col-s box">
        <div class="p">

        </div>
      </div>
    </div>
  </section>
</main>

＆＃13;

＆＃13;

＆＃13;

是否因为填充顶部和底部的高度是相对于宽度的？但如果是这种情况，怎么可能使用百分比使所有盒子的高度相同？

Answer 1

  

是否因为填充顶部和底部的高度是相对的   宽度？

是

  

但如果是这样的话，怎么可能做到全部   使用百分比装箱高度相同？

由于col-s box元素只是col-t box宽度的一半，因此您需要将其子级填充的百分比加倍padding-bottom: calc(2 * 56.66666%);，以使它们具有与col-t box相同的高度.col-t { width: 100% } .col-s { width: 50% } main#container .grid .grid-container { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; } main#container .grid .grid-container .box { -webkit-flex: 1 auto; flex: 1 auto; position: relative; } main#container .grid .grid-container .box>div { padding-bottom: 56.66666%; } main#container .grid .grid-container .col-s.box>div { padding-bottom: calc(2 * 56.66666%); /* added */ } .r { background: red; } .b { background: blue } .p { background: purple }的孩子有。

Stack snippet

＆＃13;

＆＃13;

<main id="container">
  <section class="grid">
    <div class="col-s grid-container">
      <div class="col-t box">
        <div class="r">

        </div>
      </div>
      <div class="col-s box">
        <div class="b">

        </div>
      </div>
      <div class="col-s box">
        <div class="p">

        </div>
      </div>
    </div>
  </section>
</main>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;