五個div框，連續兩個，第四個在四個頂部 - 我如何在css中執行此操作？

Question

這是我必須做的，我不知道該怎麼做，我可以創建四個div，但第五個給我麻煩。

這是我需要做的：創建五個div，其中四個需要分爲兩個，第五個需要放在四個div之上。我附上了一張圖片，以便您更好地理解。

click here to see image

Answer 1

你可以做到這一大堆方法。我想創建一個flexrow佈局中設置的父元素wrap和position: relative，然後讓4個孩子佔據了父母，在5日進行絕對定位在4

body { 
 
    margin: 0; 
 
} 
 
.flex { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    height: 100vh; 
 
    position: relative; 
 
} 
 
div > div { 
 
    flex-basis: 50%; 
 
    height: 50vh; 
 
    background: red; 
 
} 
 
div > div:nth-child(2) { 
 
    background: blue; 
 
} 
 
div > div:nth-child(3) { 
 
    background: green; 
 
} 
 
div > div:nth-child(4) { 
 
    background: yellow; 
 
} 
 
div > div:last-child { 
 
    background: pink; 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    width: 50vh;; 
 
}

<div class="flex"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Answer 2

有不同的方式來弄完，這樣的一個是在這裏：

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

https://jsfiddle.net/vy7th0es/