Jquery Onclick扩展的div行为怪异

我想做一个像这样的公文包页面。
我正在使用Jquery插件。
因此，当我单击一个框时，它应该展开并推动其他框，而不是放在它们下面。
因此，基本上，在单击时，我向正在单击的框添加一个新的宽度和高度，并在框中显示另一个

div

如果我内联添加

height

和

width

，则

div

会像应该的那样推动其他框，但当我使用jQuery时，它只会在它们下面展开

html:

<div class="container">
    <div class="box" id="1" onmouseover="$(this).addClass('hover');" onmouseout="$(this).removeClass('hover');">
        <div class="close-btn" id="cb_1"></div>
        <div class="box-content" id="bc_1">
            <img src="image.png" />
            <span class="title">Titlul clipului aici 1</span>
        </div>
        <div class="big-box-content" id="bbc_1">
            <h1 class="title">Titlul clipului aici 1</h1>

            <img src="image.png" />
            <p>Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese.</p>
        </div>
    </div>

    <div class="box" id="2" onmouseover="$(this).addClass('hover');" onmouseout="$(this).removeClass('hover');">
        <div class="close-btn" id="cb_2"></div>
        <div class="box-content" id="bc_2">
            <img src="image.png" />
            <span class="title">Titlul clipului aici 2</span>
        </div>
        <div class="big-box-content" id="bbc_2">
            <h1 class="title">Titlul clipului aici 2</h1>

            <img src="image.png" />
            <p>Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese.</p>
        </div>

    </div>
     .....
     .....
</div>

$('.box').click(function () {
    id = this.id;
    //if there is any box opened, close it
    $('.close-btn').css('display', 'none');
    $('.box-content').css('display', 'block');
    $('.big-box-content').css('display', 'none');
    $('.box').css('width', '200px').css('height', 'auto').css('padding', '10px');
    // open the clicked one
    $('#' + id).css('width', '650px').css('height', 'auto').css('padding', '15px');
    $('#bc_' + id).css('display', 'none');
    $('#bbc_' + id).css('display', 'block');
    $('#cb_' + id).css('display', 'block');
});

---

我不太熟悉砖石，但它似乎增加了

位置：绝对到元素。我建议你尝试使用
position:relative取而代之

换一行：

$('.container').masonry({ columnWidth:230 });

$('.container').masonry({ columnWidth:230, position:relative });

关于这一行：

$('.container').masonry({ columnWidth:230 });

$('.container').masonry({ columnWidth:230, position:relative });

查看他们文档的这一部分：
使用砌体的重新加载功能

    $(function(){

    $('.container').masonry('reload');

});

jsfiddle:
您需要使用砌体的重新加载功能，以便它知道新的尺寸。这似乎是合乎逻辑的。如果我能找到方法，我会试着这么做：）谢谢你，伙计！在修改尺寸后，我重新运行了砌体脚本，它工作了！如果你发布一个答案，我会接受的，谢谢！旁注：您应该像这样设置css样式
$（'.box'）.css（{'width'：'200px'，'height'：'auto'，'padding'：'10px'）@StevenFarley谢谢你！我对jQuery非常陌生，任何提示都非常感谢。很多人感谢这一行的砖石插件不起作用，但盒子推动其他盒子展开（如预期的那样）