Html 五个div框，两个在一行上，第五个在四个之上-我如何在css中做到这一点？

这是我必须要做的，我不知道怎么做，我可以创建四个div，但是第五个给我带来了麻烦

下面是我需要做的：创建五个div，其中四个需要分成两组，第五个需要放在四个div的顶部。我附上了一张图片，以便您更好地理解

---

您可以通过多种方法来实现这一点。我将创建一个父元素，将

flex

行

布局设置为

wrap

和

位置：relative

，然后让4个子元素占据父元素，绝对位置是4的第5位

正文{
保证金：0；
}
.flex{
显示器：flex；
柔性包装：包装；
高度：100vh；
位置：相对位置；
}
div>div{
弹性基准：50%；
高度：50vh；
背景：红色；
}
div>div:n子级（2）{
背景：蓝色；
}
div>div:n子级（3）{
背景：绿色；
}
div>div:n子级（4）{
背景：黄色；
}
div>div：最后一个孩子{
背景：粉红色；
位置：绝对位置；
顶部：50%；左侧：50%；
转换：翻译（-50%，-50%）；
宽度：50vh；；
}

---

实现这一目标有多种方法，其中一种方法如下：

<div class="parent">
   <div class="block a"></div>
   <div class="block b"></div>
   <div class="block c"></div>
   <div class="block d"></div>
   <div class="upperBlock"></div>
</div>

<style>
   .block{display:inline-block;width:50%;float:left;height:80px}
   .a{background:red;}
   .b{background:blue;}
   .c{background:black;}
   .d{background:gold;}
   .parent{position:relative;height:160px;}
   .upperBlock{height:80px;width:80px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:white;}
</style>

.block{显示：内联块；宽度：50%；浮点：左；高度：80px}
.a{背景：红色；}
.b{背景：蓝色；}
.c{背景：黑色；}
.d{背景：黄金；}
.parent{位置：相对；高度：160px；}
.upperBlock{高度：80px；宽度：80px；位置：绝对；左侧：50%；顶部：50%；变换：平移（-50%，-50%）；背景：白色；}