javascript - 如何将元素自动放置在彼此之下

Question

元素必须在彼此之下，因为在我的脚本中，某个 Action 的元素将从页面底部移动到顶部。当这种情况发生在例如第 3 张图片上时，第 3 张图片将滑​​到顶部，但它的旧位置现在是一个白色间隙。

有时我不明白我是否必须使用绝对、相对、固定、静态等等。

HTML:

        <div id='wrapper'>
            <img id='img1' src='./images/image1.jpg' alt='img1'>
            <br />
            <img id='img2' src='./images/image2.jpg' alt='img2'>
            <br />
            <img id='img3' src='./images/image3.jpg' alt='img3'>
            <br />
            <img id='img4' src='./images/image4.jpg' alt='img4'>
        </div>

CSS:

            body{
                margin: 0;
                padding: 0;
                height: 100%;
                width: 100%;
            }
            #wrapper{
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
            }
            #img1{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                top:0px;
            }
            #img2{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                top: 100%
            }
            #img3{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                top: 200%;
            }
            #img4{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                top: 300%;
            }

还有我的 JavaScript 让元素在特定操作中消失。

else {

        curr++;

        $('#img'+curr).animate({
            top: '0px'
        }, 1200);



        setTimeout(
             function() {
                $('#img'+(curr-1)).css('display', 'none');
              }, 1200);

      }

Answer 1

    <div id='wrapper'>
        <img id='img1' src='./images/image1.jpg' alt='img1'>

        <img id='img2' src='./images/image2.jpg' alt='img2'>

        <img id='img3' src='./images/image3.jpg' alt='img3'>

        <img id='img4' src='./images/image4.jpg' alt='img4'>
    </div>

        #wrapper{
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #wrapper img {
            display: block;
        }  

display: block;在 <img>元素;现在您的 img 元素将表现得像 block 元素，无需绝对定位或使用 <br/> , 所有图像将一个接一个地移动