Question

因此，每当我缩小页面以适合移动设备时，它在底部都会留下巨大的空白。

我希望它在收缩时可以正常堆叠，因此它一个在另一个之上。没有它在底部留下巨大的空白。

在为桌面使用调整大小时，底部没有空隙，但是一旦我将其缩小，它们就会堆叠在一起，但是在底部也留下了巨大的空隙。

.song-box {
    width: 300px;
    margin: 20px;
    position: relative;
    vertical-align: top;

}

.flex-container {
    width: 1700px;
    display: flex;
    flex-wrap: wrap;
}


.flex-container img {
    opacity: 0.5;
}

.flex-container img:hover {
    opacity: 1;
}

<div class="flex-container">
        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>


        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>
</div>

身体

body {
    margin: 0;
    padding: 0;
    background: url(/images/party.jpg);
    /* background-size: 100%; */
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}

Answer 1

您使用的背景图片似乎导致容器底部出现间隙。

Answer 2

摆脱

background-attachment: fixed;

，并在背景图片上将高度保持为自动。背景图片应该由我所看到的内容来定义。

还设置一个确定的宽度将导致该框向右延伸。这将使flex-wrap永远不会触发，因为即使较小的视口，该框仍为1700px。我建议使用

.flex-container {
    max-width: 1700px;
    display: flex;
    flex-wrap: wrap;
}

它应该正确包装，在底部留有空间。

为什么我的Flexbox在底部留下巨大的空白？

2 个答案: