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

Question

我不明白为什么我的flexbox并不都遵守相同的padding-bottom规则。只有一个班级通过padding-bottom应用高度。

.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
}

<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>

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

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
}

<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>