垂直和水平显示彼此相关的图像

Question

我有一些SVG图像，必须通过它们形成地图。
我已经通过CSS填充和边距（分别）完成了自定义样式，但是在不同的屏幕上进行检查时，这种样式不会持续。 我还尝试通过使父div float并将子属性设置为top和left来进行尝试，但这也会导致不同屏幕上的重叠。

快照已随附。 请提出任何解决方法或库来解决此问题。

Answer 1

由于您使用了填充和边距将它们移动到想要的位置，因此我假设您静态放置了这些图像。这样，您仅将这些元素定位为当前视口的大小。默认情况下，CSS位置设置为静态，因此在调整大小时图像将随着页面的流动而移动。要解决此问题，可以将图像的CSS设置为“位置：绝对”。

以下是W3学校关于CSS位置说明的链接：https://www.w3schools.com/css/css_positioning.asp

Answer 2

您可以使用媒体查询针对不同的屏幕尺寸https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

进行调整

引导程序是内置媒体查询的良好框架。 https://getbootstrap.com/docs/4.0/getting-started/introduction/

如果您只需要媒体查询，那么这可能就太过分了，但是如果没有媒体查询，您将需要编写很多CSS规则。

了解更多有关您的项目以及已在使用的内容的信息可能会产生更好的建议。