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

Вот это как раз и не требуется.

Все дивы должны расспределиться по экрану и оставаться на своем месте.

Убрал див, там осталось пустое место.

У меня проблем нет с размещением дивов, всё это делает программа.

Нет и других проблем кроме одной большой - это перетаскивания дивов с одного места на другое.

С мышкой нет проблем, а на мобильных - замучаешься.

Я еще не видел подобной работы, не видел где перешли от перетаскивания элементов мышкой к кликанью на мобильных.

Ну 5-10 раз кликнуть можно, но сотню раз, да ещё вглядываться )))

Я окончательно отказываюсь перенести эту работу на смартфон - не нужно это.

Если я буду продолжать, то сделаю две страницы с разным алгоритмом работы и программу перехода с одной страницы на другую.

Решение можно найти, было бы желание

на мобильники делают игры и посложнее этой.

Ну да ладно.

раз Вы решили по другому делать, то не буду мешать.

Ну почему мешать?

Я может и вернусь к этому варианту, ну а пока и другие варианты попробую.

Вопросов куча - помощь всегда потребуется.

Например сейчас у меня пара вопросов:

1. Как выравнять один див с другим по вертикали?

Как держать высоту дива постоянной по мере уменьшения количества дивов, находящих в нём?

Я выкручиваюсь, но не стилями.

2. Как определить на какой из дивов была нажата мышка? Я нахожу это по координатам, но должно быть и проще.

1) Если сайт должен быть респонсивным, то средствами CSS никак.

Если же это не обязательно, то можно слова поместить ещё в дивы-колонки.

Но это тоже не идеальное решение.

Здесь помоему лучше будет работать с Canvas,

но я с этим не сталкивался в HTML.

Высоту внешнего дива можно держать постоянной,

дав диву постоянную высоту height: 7em; (или в других постоянных виличинах)

2) вариантов множество.

Я иногда ставлю метку при клике.

Клик, проверка, если нет метки, то ставим метку (меняем переменную).

Высоту внешнего дива можно держать постоянной, дав диву постоянную высоту height: 7em; (или в других постоянных виличинах)

Я думаю, что это не подойдёт при свободном размещении дивов в диве.

Ведь в зависимости от разрешения экрана дивы могут расположиться в разное количество рядов.

Я вообще не указываю высоту основному диву. Дивы в нем растягивают его по вертикали.

Когда уменьшается количество дивов, удаленный див остаётся, но становится невидимым, тем самым высота дива остаётся постоянной.

Расположить див в диве по центру?

Имеется див произвольной ширины, в котором расположены элементы, растягивающие его.

Требуется расположить этот див по центру по горизонтали в другом диве. Я обычно делал это легко - использовал скрипты.

Но можно обойтись и без этого.

У кого какие варианты?

Прикреплённые файлы

И скорей всего не перетаскивать, а перекликивать.

Это легко сделать - ломать не строить.

То есть и в основной странице (для обычных компов) убрать перемещение дивов в контейнер.

Надавил див вверху(активировал его), отгадываешь нужный контейнер, куда должен поместится активированный див и давишь его.

Отгадал - программа продолжает работу с этим дивом и в конце закрашивае его белым, то есть его как бы нет на экране.

Не угадал - див поприветствует красным миганием и всё. И так дальше. Тогда легко сделать страницу адаптивной.

Ну а если упрощать, так упрощать дальше:

Сейчас дивы расположены идеально, так их распределяет программа, которая постоянно следит за разрешением экрана и в зависимости от этого размещает дивы.

Можно это убрать, накидать дивы как попало - пусть располагаются в зависимости от разрешения. Смотреться будет плохо, но понять можно на что кликать.

Ну и это не всё. Сейчас страница очень сложная, собранная в одну из десятков отдельных страниц. И не только сложная, но наверное и относительно медлительная.

Можно вернуться к нескольким страницам вместо одной (у меня раньше так и было) - большие плюсы от этого. Ну а что не круто считается - это переживём.

В итоге получится предпочтение работе на мобильных и не такой крутой (возможной) работе на больших экранах.

ПОстоянную высоту в этом случае нужно будет присваивать при помощи яваскрипта.

Док загрузился, высота нужного дива зафиксировалась (до следующей перезагрузки переменная не меняется).

Размер экрана поменялся, документ перезагружается.

Когда уменьшается количество дивов, удаленный див остаётся, но становится невидимым, тем самым высота дива остаётся постоянной.

Так в принципе тоже можно сделать.

Но чище было бы так как я выше предложил.

Расположить див в диве по центру?

внутренний див должен получить боковой margin "auto"

margin: 5px auto;

Чёт у Вас всё так сложно получается.

Никогда не надо клеить что-то одно из множества чего то.

Если это не единные библиотеки а разрозненные куски кода,

скорец всего там будет что-то, что будет мешать.

Обычно проще создать что-то всоё и абсолютно новое.

Идти пошагово и структурированно.

Как я думал.

1) кликаем элемент, он получает переменную с с параметром "активно"

2) кликаем целевой див, "активный" див перемещается в него (проверяются их параметры).

3) если всё правельно, "ОК", если ошибка "!ОК"

и дальше как Вы там планировали.

Расположить див в диве по центру?
- -
внутренний див должен получить боковой margin "auto" margin: 5px auto;

Однозначно не получится размесить див произвольной ширины в центре другого дива.

Здесь легко делается при помощи яваскрипт.

А вот при помощи стилей надо сильно постараться:

Нужно использовать 2 дополнительных дива, я их делаю для наглядности цветными, а так их не видать, хотя они и остаются.

Желтый див смещен влево на 50%. В него помещён красный див, растянутый дивом и смещен вправо на - 50%.

Вот так сложно и получается. Можно обойтись и одним дополнительным желтым дивом, но это не будет унивесальным для всех случаев.

Прикреплённые файлы

Однозначно не получится размесить див произвольной ширины в центре другого дива.

Но у меня же получается :-)

Я так уже много лет делаю.

Возможно просто некоторые другие параметры и свойства мешают.

У вас там похоже столько всего, что мешает.

Это нужно всё отследить и устранить.

Как я думал.
1) кликаем элемент, он получает переменную с с параметром "активно"
2)кликаем целевой див, "активный" див перемещается в него (проверяются их параметры).
3) если всё правельно, "ОК", если ошибка "!ОК"

Да почти так.

1. кликаем элемент, он подсвечивается и запоминается его номер.(1-12)

2) кликаем целевой див (контейнер), он подсвечивается и запоминается его номер.(1- 3)

3) поверка условий:

если див равен 1 и контейнер равен 2 то "ОК"

.....

если див равен 12 и контейнер равен 2 то "ОК"

если ни одно условие из 12 не выполнено то показывается ошибка "!ОК"

Но вместо "ОК" див закрасится зелёным цветом и появляется на некотрое время всплывающее окно

и вместо "!ОК" див закрасится на некотрое время красным цветом. Но это детали.

Остается самый главный вопрос - можно ли мириться с таким расположением элементов.

Прикреплённые файлы

Остается самый главный вопрос - можно ли мириться с таким расположением элементов.

Ну это уже дело вкуса

Я обычно делаю наоборот.

Думаю как оно должно выглядеть, а потом программирую логику.

Ну а если что не устраивает, то смотрю что именно, и думаю как это исправить.

Я обычно делаю наоборот.
Думаю как оно должно выглядеть, а потом программирую логику.

Да и я подумал и знаю как должно всё выглядеть, а толку!

Это 4 дива должны расположиться по горизонтали на смартфоне, когда он в горизонтальном положении и 2 дива, когда он в вертикальном положении.

Чтобы это осуществить, нужно пару дивов помещать в отдельный див и подбирать слова в каждый див, но это столько рутиной работы.

Поэтому вначале смирюсь с произвольным расположением дивов, а дальше видно будет.

Чтобы это осуществить, нужно пару дивов помещать в отдельный див

Ну нне без этого конечно, но это же не мешки ворочать.

Иногда нужно и вспомогательные элементы использовать и их дополнительно форматировать.

Поэтому вначале смирюсь с произвольным расположением дивов, а дальше видно будет.

В принципе дело хозяйское

Это 4 дива должны расположиться по горизонтали на смартфоне, когда он в горизонтальном положении и 2 дива, когда он в вертикальном положении.
Чтобы это осуществить, нужно пару дивов помещать в отдельный див и подбирать слова в каждый див, но это столько рутиной работы.

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

Эту дополнительную работу я показывая, не убирая линии.

Что-то уже прорисовывается, даже пробовал закинуть на сайт - пойдёт кажется. Ну а впереди поработать с программой и кое-что прилизать итд.

Ну а сейчас наверное надо взять паузу, надоел уже небось.

Но в любом случае я готов принять участие в обсуждении, если возникнут вопросы или критические замечания. А сейчас набросок, почти рабочий:

Прикреплённые файлы