我如何才能修复此网站，以便在调整窗口大小时图像不会重叠？

Question

https://weatherwarriors.ca/

https://github.com/aacamilleri/weatherapp

基本上，我已经尝试将宽度和高度定义更改为百分比而不是像素，但这并没有多大帮助，因为现在图像只是随着窗口大小调整而变得平滑并且图片仍然重叠。 我将如何解决这个问题？

<div id="uw" style="width:10%">
    <img src="uw.png" alt="UW">
</div>

<div id="mainlogo">
    <img src="mainlogo.png" alt="weatherwarriors" style="width: 400px;height: 90px">
</div>

<div id="circle">
    <img src="circle.png" alt="WLU" style="width: 105px;height: 105px">
</div>

<div id="wlu">
    <img src="wlu.png" alt="WLU" style="float:left;width: 250px;height: 100px">
</div>

https://i.stack.imgur.com/s8e9W.jpg

https://i.stack.imgur.com/Zk7ld.png

Answer 1

快速浏览您的网站，我注意到您没有在元素上定义任何位置/宽度/高度。 一个快速的解决方法是用一个 div 包裹你的标题并定义 display:flex; 而不是给包装器 div 内的子元素一个高度和一个宽度，这样每个元素都在一维 flexbox 中占据一席之地。 按照上面的操作，您现在可以 justify-content:space-between 这样它就会响应并且只要有足够的宽度，每个元素都会保持他的位置。

除了上述内容，您还可以使用@media 查询定义断点，以最小化图像的宽度和高度以适应屏幕宽度。

Answer 2

首先是不错的网站！ 保持！

因此，您面临的问题是因为没有告诉元素做任何其他事情，然后无论如何都保持原样，而移动的元素/图像是由于百分比的使用。

解决您的问题的方法是将您的元素包装在一个容器中，这样当您调整浏览器大小时，它们就不会在网站周围随机飞行或放置。

我创建了一个小型codepen，您可以查看它模拟您可能正在寻找的那种结构/布局和样式。

在样式/css 底部还有一个媒体查询，因为它可能是@Ali Hamdan 建议的好主意。

对未来的一些小建议：

• 使用position: absolute放置元素在网站周围不是很好的方法。
• 在制作网站时，在您的脑海中或在纸上设计您网站的布局。

希望它有意义并有所帮助！