<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.que{
position: relative;
margin: 20px;
}
.que .h, .que .v, .que .s{
background: pink;
}
.que1{
height: 200px;
}
.que1 .h{
position: absolute;
top: 50px;
width: 150px;
height: 50px;
}
.que1 .v{
position: absolute;
width: 50px;
height: 150px;
left: 50px;
}
.que2{ }
.que2 .s, .que2 .h{
position: relative;
height: 50px;
}
.que2 .h{
width: 150px
}
.que2 .s{
width: 50px;
margin-left: 50px;
}
.que3 .s{
width: 50px;
height: 50px;
}
.que3 .s:nth-child(1),.que3 .s:nth-child(5){
margin: 0 50px;
}
.que3 .s:nth-child(2),.que3 .s:nth-child(3),.que3 .s:nth-child(4){
display: inline-block;
margin-right: -4px;
margin-bottom: -4px;
}
.que4{
position: relative;
}
.que4 .h{
position: absolute;
top: 50px;
width: 150px;
height: 50px;
}
.que4 .h:after{
content: ' ';
display:block;
position: absolute;
width: 50px;
height: 150px;
left: 50px;
top:-50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="que que1">
<div class="h"></div>
<div class="v"></div>
</div>
<div class="que que2">
<div class="s s1"></div>
<div class="h"></div>
<div class="s s2"></div>
</div>
<div class="que que3">
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
</div>
<div class="que que4">
<div class="h"></div>
</div>
<script> </script>
</body>
</html>