Html 保持潜水深度的响应性

我已经尝试过修改它和它的链接。但我无法让容器中的三个块响应并保持它们的纵横比

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

我已经创建了一个-正如你可以看到的，容器背景显示，但不是实际的盒子，并且说容器的行为是响应的

---

如何使跨度正常工作？

我已删除了这些额外的颜色，并简化了百分比以简化代码

我的想法是添加了

position:relative到父级和
位置：绝对给孩子们。这样可以确保子位置绑定到父位置

我还添加了
top:0；底部：0
到子对象，使子对象
span
跨越父对象
div
的高度

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


.hpGridTopRow{
显示：-webkit flex；
显示器：flex；
-webkit证明内容：之间的空间；
证明内容：之间的空间；
位置：相对位置；
垫底：20%；
身高：0；
溢出：隐藏；
背景：黄色；
位置：相对位置；
}
.hpBox{
宽度：25%；
文本对齐：居中；
位置：绝对位置；
排名：0；
底部：0；
}
.hpBox.1{
宽度：50%；
}
.hpBox.2{
左：50%；
}
.hpBox.3{
右：0；
}
浅蓝色{
背景#15b2d2；
}
格林先生{
背景#8cc63f；
}
米蓝{
背景：#6a8aa8；
}
.hbBoxesp{
颜色：#fff；
边缘顶端：40px；
}

要恢复的新功能
事件

会谈

哎哟，那把小提琴烧坏了我的眼球！谢谢你的有用评论，皮特。如果你要创建一个例子，那么做一些我们可以一起工作的事情——我花了30分钟才重新正确地看到。由于它是如此糟糕，我只是继续前进，我猜我不是唯一的一个-因此，也许这是在未来的例子中要记住的。嗯，我喜欢它的颜色，我有一个答案。只是觉得你应该继续前进。。。但是我会接受你说的话。有幽默感-喜欢的人：）谢谢你的片段-和你有用的解释-看起来好多了。这是否意味着我不能使用flex布局，因为间距现在是错误的-
.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;
}