Помогите с кодом Jquery для вертикального выравнивания DIV

Question

У меня все настроено на странице jsFiddle, пожалуйста, посмотрите на это здесь: http://jsfiddle.net/ryanjay/bq5eE/

Моя проблема в том, что когда вы открываете DIV (столбец), он выравнивает все остальные закрытые divв нижней части этого.Может ли кто-нибудь помочь мне, добавив некоторый код jquery, чтобы сделать так, чтобы при открытии каждого DIV (столбца) остальные div оставались выровненными по верху.Возможно, это как-то связано с маржинальным верхом, я не уверен.

Я также использую ползунок, который оборачивает столбцы, поэтому их плавающая опция не подходит ... они просто переносятся на следующую строку.Они должны иметь встроенный блок.

Спасибо

Вот мой 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/petersendidit/bq5eE/2/show/