Ich habe einen leeren Raum, der immer größer wird, und ich habe keine Ahnung, warum

Question

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);
}

<div class="about-me" id="about-me">
    <h1>Was sind wir? </h1>
    <div class="about">
        <div class="text-container">
            <p>Text</p>

            <p>Text</p>

            <p>Text</p>
        </div>

        <div class="border">
            <img src="img/arcos.jpg" alt="">
        </div>
    </div>
</div>

Answer 1

我看到了问题。巨大的空白空间是由于max-width: 100%;属性在.about-me div上引起的。这个属性告诉浏览器将div的宽度设置为其容器的100%。然而，当容器的宽度减小时，div仍然会尝试保持100%的宽度，这将产生一个空白空间。

要解决这个问题，你可以从.about-me div中删除max-width: 100%;属性。这将允许div根据其内容的宽度进行收缩，从而消除空白空间。