Question

我彼此之间有两个大DIV。在这些DIV中有两个较小的。第一个总是可见的，第二个应该在点击第一个时使用jQuery slideDown。好吧，它确实向下滑动，但它不会移动位于其下方的下一个大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>

在那些＆＃34;小＆＃34; 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上没有任何声明的高度。它绝对定位，因此不会自动占用布局中的任何高度，除非您声明了特定的高度。尝试在border: 1px solid red附近添加.post-bottom，在.comments添加不同的颜色边框，以确切了解他们占用了多少空间（尽管使用Firebug检查这些元素会更好）。

对于绝对定位的元素，总是为真的一件事是它们永远不会向其父元素添加高度或宽度。

我认为您可能希望将'.post-stats'div绝对定位，并且.comments div相对定位，因为它将是需要适应可变数量元素的元素（因此可变高度））。

另请注意，使用top:或bottom:可能会在元素高度方面遇到一些令人困惑的布局问题，以及如果您不考虑帐户高度，它们如何在垂直空间中向下或向上推动用于额外增加/减少定位（或根据具体情况为负）高度或额外边距或填充它的父元素。

DIV不会随着jQuery向下移动

2 个答案: