Как заставить множество элементов (div) обтекать один конкретный элемент (div) в html/css/js? ⇐ CSS

[Anonymous]

Вот что у меня есть сейчас:


Как видите, круги находятся под большим синим прямоугольником. Но я хочу, чтобы они завернулись. Я бы выглядел примерно так:


Прямоугольник должен находиться в центре. И обратите внимание на индексацию: было бы хорошо, если бы она продолжала увеличиваться слева направо и сверху вниз.
Это мой код:
HTML

Код: Выделить всё

1440 Minutes wallpaper



big block

CSS

Код: Выделить всё

body {

margin: 0px;
}
#flexbox {

width: 2560px;
height: 1440px;
}
#balls {

width: 2520px;
height: 960px;

display: flex;
flex-wrap: wrap;

}
#info {

width: 560px;
height: 440px;

font-size: 50px;
color: white;
background-color: rgb(0,0,255,0.5);

top: 500px;
left: 1000px;

position:absolute;
}
.MinuteBall {

background-color: gray;

width: 40px;
height: 40px;
margin: 1px;
border-radius: 50%;
}

JS

Код: Выделить всё

document.body.onload = InitiateWallpaper;

function InitiateWallpaper() {

for (let i = 0; i < 1440; i++) {

const newDiv = document.createElement("div");
newDiv.classList.add("MinuteBall");
const text = document.createTextNode(i);
newDiv.appendChild(text);

const currentDiv = document.getElementById("balls");
currentDiv.appendChild(newDiv);
}
}

Я делаю это только для себя, по крайней мере, на данный момент, поэтому меня не интересует и не беспокоит поддержка разных размеров экрана, браузеров и тому подобного. Только Firefox и экран 2560x1440.
Все существующие размеры являются экспериментальными и не имеют такого большого значения, как обтекание.
Я новичок в Интернете и буду очень признателен за вашу помощь!


Подробнее здесь: https://stackoverflow.com/questions/791 ... -in-html-c