CSS или js-трюк для упорядочения элементов на холсте [закрыто] ⇐ CSS

[Anonymous]

У меня есть набор элементов from, все они заключены в div на холсте.

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

Мы знаем верхнюю, левую, ширину и высоту всего этого. Однако эти элементы размещаются на холсте перетаскиванием мыши, т. е. вручную. Таким образом, выравнивание несовершенно.
Мне нужен простой способ их выравнивания и упорядочения.
Пример:


должно стать:


Посмотрите, как левый верхний и правый элементы выровнены сверху...
Если предмету есть куда расти вправо, ему следует позволить расти.
Другой пример:


Должно стать:


Увидите, что синий элемент уменьшен. и желтый предмет поднимается. Это решено, потому что сокращение будет меньшим изменением, чем увеличение его до всего горизонтального пространства, и создаст большой разрыв между розовым элементом и синим, например:

Кроме того, результат будет менее компактным. Это должно иметь более низкий приоритет. Я понимаю, что какое-то решение в любом случае может оказаться таким, но это должно быть последним средством.
Попытка решения:
Я пробовал чтобы использовать макет сетки в CSS и найти ближайший столбец/строку сетки. Но это приводит к непредсказуемому поведению.
Я бы предпочел простое решение, которое я могу реализовать в valina js + jquery, в идеале — библиотеку, которую я могу включить и вызвать функцию.< /p>
Я понимаю, что написать полный алгоритм верстки будет очень сложно. Итак, прежде чем я заново изобрету велосипед, мой вопрос:
Есть ли простое решение этой проблемы с использованием CSS/JS без использования node/react или других фреймворков? Спасибо

Подробнее здесь: https://stackoverflow.com/questions/793 ... n-a-canvas