Сетка созданная с помощью position absolute

Question

Задача: Создать с помощью php 100 блоков размером 100х100 любого цвета. Поставить для каждого из этих блоков position: absolute, с помощью JS найти эти блоки и изменить каждому из них значение top и left таким образом чтобы они образовали сетку 10 на 10 (с расстоянием 10 пикселей друг от друга) используя ДВА цикла for. Я попробовал сделать вот так:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <?  for($i = 1; $i <= 100; $i++){?>
        <div class="d" style="width: 100px;height: 100px;background-color: red; position: absolute;"></div>     
    <? } ?>
    <script>
        let a = document.getElementsByClassName('d');
        for (i = 1; i <= 10; i++){
            a[i].style.top = i*10+100+'px';
            for (j = 1; j <= 10; j++) {
                a[i].style.left = i*10+100+'px';
            }
        }
    </script>
</body>
</html>

И получилось вот так

Answer 1

У вас правильно 2 вложенных цикла, но неправильное обращение к элементам сетки. В данном случае i = это ряд, j - это столбец. У вас 10 раз запускается цикл, в котором вы 10 раз меняете позицию одного и того же элемента a[i].

Вам нужно во внутреннем цикле обращаться к нужному элементу сетки (i*10 + j) и уже его позиционировать:

for (let i = 0; i < 10; i++){
    for (let j = 0; j < 10; j++) {
        a[i*10 + j].style.left = 110*j +'px';
        a[i*10 + j].style.bottom = 110*i +'px';
    }
}

БЛОГ НА HUSL

Сетка созданная с помощью position absolute

Ответы (1 шт):