DIV 不会随着 jQuery 而下移

Question

我有两个大的div。在这些DIV中有两个较小的DIV。第一个总是可见的，当点击第一个时，第二个应该与jQuery一起滑动向下。好吧，它确实向下滑动，但它不会移动位于它下面的下一个大DIV。

在代码中，它看起来有点像：

<div class="big">
 <div class="small_up">
 </div>
 <div class="small_down">
 </div>
</div>
<div class="big">
 <div class="small_up">
 </div>
 <div class="small_down">
 </div>

在这些"小"DIV中，有更多的、绝对定位的DIV。

如果你想看到完整的，真实的代码：

<div class="post post-texts" status="closed">
    <div class="post-top">
        <div class="avatar"><img src="img/avatar.png"></div>
        <a href="http://parislemon.com/post/15604811641/why-i-hate-android" class="quote" target="empty">
            <div class="quote">
                »I hate Android for the same reason that Severus Snape hates Harry Potter - the very sight reminds me of something so beautiful, that was taken. Except it’s worse. It’s as if Harry Potter has grown up to become Voldemort. «
            </div>
        </a>
        <div class="buttons">
            <img class="recite" src="img/recite.png" />
            <img class="like" src="img/like.png" />
            <img class="facebook" src="img/facebook.png" />
            <img class="twitter" src="img/twitter.png" />
        </div>
    </div>
    <div class="post-bottom">
            <div class="post-stats" >
                <div class="recite-counter">15</div>
                <p class="recite-counter-text">Recites</p>
                <div class="like-counter">36</div>
                <p class="like-counter-text">Likes</p>
            </div>
            <div class="comments comments-texts">
                <div class="single-comment">
                    <div class="avatar-comment"><img src="img/avatar-comment.png" /></div>
                    <div class="comment-content">
                    Patrick -
                    <span class="comment">Lorem ipsum dolor sit amet, consetetur  At vero eos et accusam et just At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.o duo dolores et ea rebum. Stet clita kasd gubergren. sadipscing elitr, sed diam nonumy eirmod tempor.  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</span>
                    </div>
                    <div class="comment-time">
                        about 10 minutes ago
                    </div>
                </div>
                <div class="single-comment">
                    <div class="avatar-comment"><img src="img/avatar-comment.png" /></div>
                    <div class="comment-content">
                    Patrick -
                    <span class="comment">stfu</span>
                    </div>
                    <div class="comment-time">
                        about 5 minutes ago
                    </div>
                </div>      
            <div>
        </div>
    </div>
</div>
</div>

jQuery:

$('div.post').click(function() {
    $('div.post-bottom').slideDown(500);
});

CSS：

div.timeline {
    position: absolute;
    top: 420px;
    left: 50%;
    margin-left: -425px;
    width: 850px;
}
div.post {
    position: relative;
    height: 170px;
    width: 850px;
    margin-bottom: 10px;
}
div.post-texts {
    background-color: #196074;
}
div.avatar {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 110px;
    height: 110px;
}
div.quote {
    position: absolute;
    left: 150px;
    top: 17px;
    width: 650px;
    font-family: DroidSans;
    font-size: 16px;
    color: #fff;
    line-height: 23px;
}
div.buttons {
    position: absolute;
    top: 135px;
    left: 20px;
    height: 20px;
    width: 110px;
}
div.post-bottom {
    position: relative;
    top: 170px;
    width: 853px;
    display: none;
}
div.post-stats {
    position: relative;
    width: 426px;
    background-color: #196074;
    padding: 50px 0px 50px 20px;
}
div.recite-counter, div.like-counter {
    height: 25px;
    width: 35px;
    border-radius: 20px;
    text-align: center;
    font-family: DroidSansBold;
    font-size: 14px;
    color: #196074;
    padding-top: 9px;
    background-color: #fff;
}
div.like-counter {
    margin-top: 20px;
}

div.comments {
    position: absolute;
    top: 0px;
    left: 426px;
    width: 427px;
    /* border-left: 3px solid #fff; */
}
div.comments-texts {
    background-color: #196074;
}
div.single-comment {
    width: 400px;
    min-height: 55px;
    margin-bottom: 1px;
}
div.avatar-comment {
    position: absolute;
    margin: 10px;
}
div.comment-content {
    font-family: DroidSansBold;
    font-size: 12px;;
    padding: 9px 5px 10px 53px;
    line-height: 15px;
    color: #fff;
}
div.comment-time {
    font-family: DroidSans;
    font-size: 12px;
    color: #fff;
    padding: 0px 0px 10px 53px;
}

很快：上面的DIV在这个DIV下面的DIV上滑动。它下面的DIV也应该向下滑动。

Answer 1

尝试将所有位置更改为"相对"，看看是否有效。

Answer 2

这里的问题是div.comments上没有任何声明的高度。它是绝对定位的，因此不会自动占据布局中的任何高度，除非你为它声明了特定的高度。试着在.post-bottom周围添加border: 1px solid red，并在.comments上添加不同的颜色边框，以查看它们到底占据了多少空间（尽管使用Firebug检查这些元素会更好）。

对于绝对定位的元素，总是正确的一点是，它们将从不向其父元素添加高度或宽度。

我认为您可能希望将".post-stats"div放置在绝对位置，将.commentsdiv放置在相对位置，因为这将是需要适应可变数量元素（因此也需要适应可变高度）的元素。

此外，请记住，如果不考虑父元素的额外（或负（视情况而定）高度或额外边距或填充的位置增加/减少，使用top:或bottom:可能会在元素高度以及它们如何在垂直空间中向下或向上推动方面给您带来一些令人困惑的布局问题。