需要帮助改变这个jQuery代码来解决一个元素

我把一切都设立了的jsfiddle页面上的垂直位置，请看看这里：http://jsfiddle.net/ryanjay/bq5eE/需要帮助改变这个jQuery代码来解决一个元素

我的问题是，当你打开DIV（列），它将所有其他封闭的div对齐到底部。有人可以通过添加一些jquery代码来帮助我，当你打开每个DIV（列）时，其他div保持对齐到顶部。也许这与margin-top有关，我不确定。

我也使用了一个包裹列的滑块，所以浮动它们不是一个选项..他们只是换行到下一行。他们必须有内联块的显示。

感谢

这里是我的HTML：

<div class="column"> 
    <div class="open"> 
     open 
    </div> 
    <div class="close">close</div> 
    <div class="contentInner"> 
     <div class="ProjectContainer"> 
      Content goes here. 
     </div> 
    </div> 
</div> 

<div class="column"> 
    <div class="open"> 
     open 
    </div> 
    <div class="close">close</div> 
    <div class="contentInner"> 
     <div class="ProjectContainer"> 
      Content goes here. 
     </div> 
    </div> 
</div>

这里是我的Jquery：

$(document).ready(function() { 
    //Page Load 
    $('.column').css({ 
     width: '200px', 
     height: '200px' 
    }); 
    // Open 
    $('.open').click(function() { 
     $(this).parent().animate({ 
      width: '400px', 
      height: '520px', 
     }, 500); 
     $(this).hide(); 
     $(this).siblings('.close').show(); 
     $(this).siblings('.contentInner').fadeIn('slow', function() { 
      $(this).show(); 
     }); 
    }); 

    // Close 
    $('.close').click(function() { 
     $(this).parent().animate({ 
      width: '200px', 
      height: '200px' 
     }, 500); 
     $(this).siblings('.contentInner').fadeOut('100', function() { 
      $(this).hide(); 
     }); 
     $(this).hide(); 
     $(this).siblings('.open').fadeIn('150', function() { 
      $(this).show(); 
     }); 
    }); 

});

我的CSS：

.column { 
    position: relative; 
    width: 200px; 
    border-left: 1px solid #999; 
    border-right: 1px solid #999; 
    height: 520px; 
    margin: 30px 30px 0px 0px; 
    display: inline-block; 
    text-align: left; 
} 

.open { 
    position: absolute; 
    margin: 0px 0px 0px 0px; 
    cursor: pointer; 
} 

.close { 
    position: absolute; 
    margin: 0px 0px 0px 368px; 
    cursor: pointer; 
    display: none; 
} 

.contentInner { 
    position: absolute; 
    width: 380px; 
    height: 400px; 
    font: 12px Helvetica, Arial, Sans-Serif; 
    font-weight: 200; 
    margin: 20px 0px 0px 10px; 
    display: none; 
    white-space: normal; 
}

你总是可以看到它jsFiddle here：http://jsfiddle.net/ryanjay/bq5eE/

谢谢！

来源

2011-03-06 Ryan

http://jsfiddle.net/bq5eE/7/

只需添加一个垂直对齐风格的。内容CSS块：

vertical-align: top;

另外，如果你需要使用jQuery做，这样做：

$(".content").css("vertical-align", "top");

来源

2011-03-06 21:27:14

需要帮助改变这个jQuery代码来解决一个元素

回答

相关问题