Показать изображения, имеющие отношение друг к другу по вертикали и горизонтали

Question

У меня есть несколько SVG изображений, и я должен сформировать карту на их основе.
Я сделал пользовательские стили с помощью отступов CSS и поля (по отдельности), но формирование не продолжается при проверке на разных экранах.Я также попытался сделать родительский div float и установить дочерние свойства как top и left, но это также приводит к перекрытию на разных экранах.

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

Answer 1

Вы можете использовать медиазапросы для настройки различных размеров экрана. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Хорошей платформой со встроенными медиазапросами является начальная загрузка.https://getbootstrap.com/docs/4.0/getting-started/introduction/

Это может быть излишним, если все, что вам нужно, это медиа-запросы, но без этого вам придется написать много CSS-правил.

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

Answer 2

Я предполагаю, что вы статически располагали изображения, так как вы использовали отступы и поля, чтобы переместить их туда, куда вы хотели, чтобы они шли.Делая это, вы размещаете эти элементы только для размера текущего окна просмотра.По умолчанию позиции CSS установлены на статические, поэтому изображения будут перемещаться вместе с потоком страницы при изменении размера.Чтобы исправить это, вы можете установить CSS изображений как «position: absolute».

Вот ссылка на объяснение CSS позиционирования школ W3: https://www.w3schools.com/css/css_positioning.asp