如何在另一个 div 上克隆一个 div jquery

Question

我目前正在尝试克隆一个 div，在原始的顶部创建它，然后让它滑出屏幕。 不幸的是，克隆时我无法让它与原始 div 正确对齐。

main.js

    var container = $("#pagecontainer");
    clone = container.clone()
    clone.attr('class', 'movingcontainer');
    var destination = container.offset();
    clone.css({top: destination.top, left:destination.left});
    clone.appendTo('#wholecontainer');

    clone.animate({
        right: '-100%'
    },
    {
        duration: 400,
        complete: function() {
        clone.remove()
    }},
    500, 
    function() {
        clone.css('right', '100%');
        clone.appendTo('#body');
    });

样式.css

    .movingcontainer {
        position: absolute;
        background-color: #fff;
        width: 560px;
        height: 146px;
        display: flex;
        text-overflow: 0px;
        color: black;
        z-index: 10;
        border: none;
        margin: 0;
    }

    .movingcontainer .like, .movingcontainer .dislike {
        width: 50px;
        height: 100%;
        border: none;
        padding: none;
        margin:0;
    }

    .pagecontainer {
        display: flex;
        min-width: 70%;
        margin: 0;
        position: absolute;
        margin-top: 10%;


    }
    .wholecontainer {
        position: absolute;
        min-width: 70%;
        max-height: 210px;
        display: flex;
        flex-direction: column;
        margin-left: 25%;
        margin-right: auto;
        align-items: center;
    }   

索引.html

<div class="wholecontainer" id="wholecontainer">
    <button class="createpost" type="button" name="createpost">
        <td>Create Post</td>
    </button>
    <div class="pagecontainer" id="pagecontainer">
        <script type="text/javascript">var token = '{{ csrf_token }}';</script>
        <button type="button" name="dislike" class="dislike" value="dislike?{{ post.id }}"  id="dislike" onclick="like(this)">
            <i class="fas fa-times fa-3x dislikex"></i>
        </button>
        <div class="postcontainer" id="postcontainer">
            <h1 class="posttitle" id="posttitle">{{ post.title }}</h1>
            <h1 class="postcontent" id="postcontent">{{ post.content }}</h1>
            <h3 class="postdate" id="postdate">{{ time_since }}</h3>
        </div>
        <button type="button" name="like" class="like" value="like?{{ post.id }}" id="like" onclick="like(this)">
            <i class="fas fa-check fa-2x likecheck"></i>
        </button>
    </div>
</div>

它可能与整个容器父级比 div 大有关，因为它包含创建发布按钮。 如果没有创建帖子并将 div 放在屏幕顶部可以正常工作，但是我需要按钮并将 div 放在中间附近。 有任何想法吗？

Answer 1

哎呀，只需要在克隆的 div 中添加一个margin-top: 10% 。