• B правой части каждого сообщения есть стрелки и . Не стесняйтесь оценивать ответы. Чтобы автору вопроса закрыть свой тикет, надо выбрать лучший ответ. Просто нажмите значок в правой части сообщения.

Помогите решить проблему HTML/CSS

Alecs_2101

Member
21.01.2021
17
0
BIT
0
CSS:
<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RUN</title>
    <style>
        .box{
            position: relative;
        }
        #block1{
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: cyan;
        border:2px solid black;
        border-collapse: collapse;
        }
        #block2{
        position: absolute;
        left: 200px;
        top: 0;
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
        border:2px solid black;
        border-collapse: collapse;
        }
        #block3{
        position: absolute;
        left: 100 px;
        top: 100px;
        width: 100px;
        height: 100px;
        background-color: fuchsia;
        border:2px solid black;
        border-collapse: collapse;
        }
        #block4{
        position: absolute;
        left: 0 px;
        top: 200px;
        width: 100px;
        height: 100px;
        background-color: gold;
        border:2px solid black;
        border-collapse: collapse;
        }
        #block5{
        position: absolute;
        left: 200 px;
        top: 200px;
        width: 100px;
        height: 100px;
        background-color: gold;
        border:2px solid black;
        border-collapse: collapse;
        }


    </style>
</head>
<body>
    <div class="box">
        <div id="block1"></div>
        <div id="block2"></div>
        <div id="block3"></div>
        <div id="block4"></div>
        <div id="block5"></div>
    </div>
    
</body>
</html>


Вот код, должно получится так
d3bf1cab-770d-42cd-9a7b-6fef32ff78a1.jpg



А получилось так:
Форум.png



Помогите решить, на цвета внимание не обращайте важно только расположение квадратов.
 
Мы в соцсетях:

Обучение наступательной кибербезопасности в игровой форме. Начать игру!