我如何才能修復此網站，以便在調整窗口大小時圖像不會重疊？

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放置元素在網站周圍不是很好的方法。
• 在制作網站時，在您的腦海中或在紙上設計您網站的布局。

希望它有意義並有所幫助！