首页  >  问答  >  正文

我有一个不断增长尺寸的空白空间,但我对原因一无所知

<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 天前542

全部回复(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
  • 取消回复