Question

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

我的问题是，当你打开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上看到它：http://jsfiddle.net/ryanjay/bq5eE/

谢谢！

Answer 1

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

只需在.content CSS块中添加一个垂直对齐样式：

vertical-align: top;

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

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

需要帮助改变这个Jquery代码来修复元素的垂直位置

1 个答案: