Bild der Frage: Bild der Frage
Wenn Sie sich das vorherige Bild ansehen, werden Sie sehen, dass ich dort einen riesigen leeren Raum habe. Wenn ich mein normales Display (ca. 1200 Pixel) habe, ist alles in Ordnung. Wenn jedoch die Breite verringert wird, vergrößert sich der Leerraum immer, und ich weiß nicht, warum das passiert.
Bilder werden normal auf dem Bildschirm angezeigt: Normalerweise angezeigte Bilder
Ich werde einen Teil des HTML- und CSS-Codes hochladen, damit der Code klar geschrieben werden kann.
.about-me{ Rand oben: 10px; maximale Breite: 100 %; maximale Höhe: 100 %; Höhe: 100 Vh; } .about-me h1{ Farbe: Goldrute; Textausrichtung: Mitte; Schriftgröße: 52px; } .about-me .about{ Anzeige: Flex; rechtfertigen-Inhalt: Mitte; align-items: center; } .about-me .about .text-container{ maximale Breite: 70 %; } .about-me .about .text-container p{ Schriftgröße: 24px; Textausrichtung: Mitte; Rand: 50px; } .about-me .about .text-container span{ Farbe: Goldrute; Schriftstärke: 900; } .Grenze{ Anzeige: Flex; rechtfertigen-Inhalt: Mitte; align-items: center; Rand: 1px feste Goldrute; Hintergrundfarbe: Goldrute; Randradius: 50 %; Rand: 0 50px; maximale Breite: 100 %; } .about-me .border img{ maximale Breite: 100 %; maximale Höhe: 100 %; Randradius: 50 %; Maßstab: 95 %; Box-Shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
Was sind wir?
Text
Text
Text
我看到了问题。巨大的空白空间是由于
max-width: 100%;
属性在.about-me div
上引起的。这个属性告诉浏览器将div
的宽度设置为其容器的100%
。然而,当容器的宽度减小时,div
仍然会尝试保持100%
的宽度,这将产生一个空白空间。要解决这个问题,你可以从
.about-me div
中删除max-width: 100%;
属性。这将允许div
根据其内容的宽度进行收缩,从而消除空白空间。