需要帮助更改此 Jquery 代码以修复元素的垂直定位

Question

我已在 jsFiddle 页面上设置了所有内容，请在此处查看： http://jsfiddle.net/ ryanjay/bq5eE/

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

我还使用了一个围绕列的滑块，因此浮动它们不是一个选项..它们只是换行到下一行。它们必须具有 inline-block 的显示。

谢谢

这是我的 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 上看到它： http: //jsfiddle.net/ryanjay/bq5eE/

谢谢！

Answer 1

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

只需向 .内容 CSS 块：

vertical-align: top;

或者，如果您需要使用 jQuery 来执行此操作，请执行以下操作：

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