Saya mempunyai ruang kosong yang terus berkembang dalam saiz dan saya tidak tahu mengapa

Question

Gambar soalan: Gambar soalan

Jika anda melihat imej sebelumnya, anda akan melihat bahawa saya mempunyai ruang kosong yang besar di sana. Apabila saya mempunyai paparan biasa saya (sekitar 1200 piksel) semuanya baik-baik saja. Namun, apabila lebarnya dikurangkan, ruang kosong itu sentiasa bertambah dan saya tidak tahu mengapa ini berlaku.

Gambar dipaparkan seperti biasa pada skrin: Gambar yang biasa dipaparkan

Saya akan memuat naik sebahagian daripada kod HTML dan CSS supaya kod itu boleh ditulis dengan jelas.

.about-me{
jidar atas: 10px;
lebar maksimum: 100%;
ketinggian maksimum: 100%;
ketinggian: 100vh;
}

.tentang-saya h1{
warna: goldenrod;
text-align: tengah;
saiz fon: 52px;
}

.tentang-saya .tentang{
paparan: flex;
justify-content: pusat;
align-item: tengah;
}

.tentang-saya .tentang .bekas-teks{
lebar maksimum: 70%;
}

.tentang-saya .tentang .bekas-teks p{
saiz fon: 24px;
text-align: tengah;
jidar: 50px;
}

.tentang-saya .tentang .teks-bekas rentang{
warna: goldenrod;
berat fon: 900;
}

.sempadan{
paparan: flex;
justify-content: pusat;
align-item: tengah;

sempadan: 1px goldenrod pepejal;
warna latar belakang: goldenrod;
jejari sempadan: 50%;

jidar: 0 50px;
lebar maksimum: 100%;
}

.about-me .border img{
lebar maksimum: 100%;
ketinggian maksimum: 100%;
jejari sempadan: 50%;
skala: 95%;
bayang-kotak: 0 0 10px rgba(0, 0, 0, 0.2);
}

<div class="about-me" id="about-me">
    <h1>Apakah kita? </h1>
    <div class="about">
        <div class="text-container">
            <p>Teks</p>

            <p>Teks</p>

            <p>Teks</p>
        </div>

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

Answer 1

Saya nampak masalahnya. Ruang kosong yang besar adalah disebabkan oleh lebar max-width: 100%;属性在.about-me div上引起的。这个属性告诉浏览器将div的宽度设置为其容器的100%。然而，当容器的宽度减小时，div仍然会尝试保持100%, yang akan mewujudkan ruang kosong.

Untuk membetulkannya, anda boleh mengecilkan .about-me div中删除max-width: 100%;属性。这将允许divberdasarkan lebar kandungannya, dengan itu menghapuskan ruang kosong.