DIV不会随着jQuery向下移动

我有两个大DIV在彼此之下。在这些DIV中有两个较小的DIV。第一个是总是可见的，第二个应该在第一个单击时用jQuery滑动。嗯，它确实滑落了，但它并没有移动位于它下面的下一个大DIV。DIV不会随着jQuery向下移动

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

<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也应该滑下去。

来源

2012-01-16 Patrick Muff

我让工作小提琴与给定的代码帮助（但没有图像）：http://jsfiddle.net/ZXs56/ – diEcho 2012-01-16 18:41:26

尝试将所有位置更改为“相对”并查看是否有效。

来源

2012-01-16 18:40:02 Erick

这是正确的。 @帕特里克，请记住，绝对定位的元素就是这样：绝对定位。如果你想让他们相对于他们的兄弟姐妹被定位（和重新定位），他们必须相对定位或者你必须手动移动他们。 – 2012-01-16 18:42:45

好吧，我只是将所有事情都改为相对的，但仍然无效。我想我会从头开始，我已经从我的一个旧项目中复制了评论部分。感谢你们。 – 2012-01-16 18:45:48

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

有一点是始终真正为绝对定位的元素是，他们将永远不会添加高度或宽度他们的父元素。

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

也请记住，使用top:或bottom:可以给你关于元素的高度，以及它们如何相互推动向上或向下的垂直空间，如果你不占位置增加/减少一些容易混淆的布局问题无论是额外的（或负面的情况下可能）高度或额外的余量或填充它的父元素。

来源

2012-01-16 18:52:02

DIV不会随着jQuery向下移动

回答

相关问题