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