首頁  >  問答  >  主體

我有一個不斷增長尺寸的空白空間,但我對原因一無所知

<p>問題的圖片: 問題的圖片</p> <p>如果你看一下之前的圖片,你會發現我那裡有一個巨大的空白空間。當我有我的正常顯示(大約1200像素)時,一切都很好。然而,當寬度被縮小時,那個空白空間總是增加,我不知道為什麼會這樣。 </p> <p>螢幕正常顯示的圖片: 正常顯示的圖片</p> <p>我將上傳一部分HTML和CSS程式碼,以便清楚寫出程式碼。 </p> <p><br /></p> <pre class="brush:css;toolbar:false;">.about-me{ margin-top: 10px; max-width: 100%; max-height: 100%; height: 100vh; } .about-me h1{ color: goldenrod; text-align: center; font-size: 52px; } .about-me .about{ display: flex; justify-content: center; align-items: center; } .about-me .about .text-container{ max-width: 70%; } .about-me .about .text-container p{ font-size: 24px; text-align: center; margin: 50px; } .about-me .about .text-container span{ color: goldenrod; font-weight: 900; } .border{ display: flex; justify-content: center; align-items: center; border: 1px solid goldenrod; background-color: goldenrod; border-radius: 50%; margin: 0 50px; max-width: 100%; } .about-me .border img{ max-width: 100%; max-height: 100%; border-radius: 50%; scale: 95%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }</pre> <pre class="brush:html;toolbar:false;"><div class="about-me" id="about-me"> <h1>我們是什麼? </h1> <div class="about"> <div class="text-container"> <p>文本</p> <p>文本</p> <p>文本</p> </div> <div class="border"> <img src="img/arcos.jpg" alt=""> </div> </div> </div></pre> <p><br /></p>
P粉729518806P粉729518806454 天前541

全部回覆(1)我來回復

  • P粉239164234

    P粉2391642342023-08-15 12:12:55

    我看到了問題。巨大的空白空間是由於max-width: 100%;屬性在.about-me div上引起的。這個屬性告訴瀏覽器將div的寬度設定為其容器的100%。然而,當容器的寬度減小時,div仍然會嘗試保持100%的寬度,這將產生一個空白空間。

    要解決這個問題,你可以從.about-me div中刪除max-width: 100%;屬性。這將允許div根據其內容的寬度進行收縮,從而消除空白空間。

    回覆
    0
  • 取消回覆