Question

元素必须在彼此之下，因为在我的脚本中，某个动作元素将从页面底部移动到顶部。当发生这种情况时，例如第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元素就像一个块元素，不需要绝对定位它或使用<br/>，所有图像将一个接一个地显示

Answer 2

如果你想坚持你的位置和顶部属性，那么只需切换到相对，否则使用 display：block; 我建议也读这个：

https://css-tricks.com/the-difference-between-id-and-class/

示例：

   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: relative;
                top:0px;
            }
            #img2{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
               position: relative;
                top: 100%
            }
            #img3{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
                 position: relative;
                top: 200%;
            }
            #img4{
                min-width: 100%;
                min-height: 100%;
                max-width: 100%;
                max-height: 100%;
                position: relative;
                top: 300%;
            }

Answer 3

尝试使用

 display:block;

为此，你也可以给予

 witdh:100%;

并设置

 margion:0 auto;

也尝试以下：

 http://www.w3schools.com/cssref/pr_class_display.asp

如何自动将元素置于彼此之下

3 个答案: