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以上滑過一個whi ch在這個DIV下。它下面的DIV也應該滑下去。

Answer 1

嘗試將所有位置更改爲「相對」並查看是否有效。

Answer 2

這裏的問題是您沒有div.comments上的任何聲明的高度。它絕對定位，因此不會自動佔用佈局中的任何高度，除非您已爲其聲明瞭特定的高度。嘗試添加border: 1px solid red約.post-bottom和不同的顏色邊框到.comments，以確定它們佔據多少空間（儘管使用Firebug檢查這些元素會更好）。

有一點是始終真正爲絕對定位的元素是，他們將永遠不會添加高度或寬度他們的父元素。

我想你可能希望將'.post-stats'div完全定位，並且.comments div相對定位，因爲這將是需要適應可變數量元素的元素（並且因此可變高度）。

也請記住，使用top:或bottom:可以給你關於元素的高度，以及它們如何相互推動向上或向下的垂直空間，如果你不佔位置增加/減少一些容易混淆的佈局問題無論是額外的（或負面的情況下可能）高度或額外的餘量或填充它的父元素。