保持 div 的深度响应

Question

我已尝试调整此post 及其alistapart 链接。但是我无法让容器中的三个块做出响应并保持它们的纵横比

<div class="hpGridTopRow">
  <span class="hpBox lightBlue one">
    <p class="hbBoxesp">New to Restore</p>
  </span>
  <span class="hpBox green two">
    <p class="hbBoxesp">Events</p>
  </span>
  <span class="hpBox midBlue three">
    <p class="hbBoxesp">Talks</p>
  </span>
</div>

我需要他们将自己安排到 hpGridTopRow div 的边界，所以我使用 flex - 并且它工作得很好。

但是，布局必须是响应式的 - 容器的纵横比需要随着宽度的变化而保持不变。

这是css

.hpGridTopRow, 
.hpGridBottomRow {
display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position: relative;
    padding-bottom: 20%;
    height: 0;
    overflow:hidden;
    background:yellow;
}
.hpBox {    
    width:24.18803418803419%;
    text-align:center;
    height:264px;
    height:100%;
}

.hpBox.one {
    width:49.4017094017094%;
}

.lightBlue {
    background:#15b2d2;
}
.green {
    background:#8cc63f;
}
.midBlue {
    background:#6a8aa8;
}    
.hbBoxesp {
    color:#fff;
    margin-top:40px;
}

我创建了一个jsfiddle - 你可以看到容器背景显示，但不是实际的盒子，并且所述容器的行为是响应式的。

如何让跨度正常运行？

Answer 1

我删除了那些多余的颜色并简化了百分比以简化代码。

我的想法是我已将position: relative; 添加到父级，将position: absolute; 添加到子级。这可确保子位置与父位置绑定。

我还为孩子添加了top: 0; bottom: 0;，以使孩子span 跨越高度作为父母div。

然后您必须使用left 和right 定位将跨度放置在正确的位置。

.hpGridTopRow {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  position: relative;
  padding-bottom: 20%;
  height: 0;
  overflow: hidden;
  background: yellow;
  position: relative;
}
.hpBox {
  width: 25%;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
}
.hpBox.one {
  width: 50%;
}
.hpBox.two {
  left: 50%;
}
.hpBox.three {
  right: 0;
}
.lightBlue {
  background: #15b2d2;
}
.green {
  background: #8cc63f;
}
.midBlue {
  background: #6a8aa8;
}
.hbBoxesp {
  color: #fff;
  margin-top: 40px;
}

<div class="hpGridTopRow">
  <span class="hpBox lightBlue one">
    <p class="hbBoxesp">New to Restore</p>
  </span>

  <span class="hpBox green two">
    <p class="hbBoxesp">Events</p>
  </span>

  <span class="hpBox midBlue three">
    <p class="hbBoxesp">Talks</p>
  </span>
</div>