css - 始终保持 3 个 div 连续？

Question

我在对齐 div 时遇到问题。我在一个容器中有 5 个 div，全部向左浮动，按照下图设置。

每个 div 的宽度为 425px，div 与容器之间的边距始终为 15px，容器的宽度为 1350px。

然后我还有一个 onclick JS 函数，它可以将单击的 div 展开为看起来像第二个图像。

这对于前两个 div 效果很好，因为第三个 div 只是被推离了边缘。然而，当我打开第三个 div 时，它落到下一行并在右上角留下一个空隙(见第三张图片)。

我想知道是否有人对我如何用第四个 div 填补这个空白有任何想法，因为顺序无关紧要，所以有一个完整的顶行。 (见第四张图)

感谢您的帮助。

Answer 1

您可以测试该框是否是一行中的最后一个，如果是，则将其与下一个框交换。像这样:

http://jsfiddle.net/DomDay/PExXd/

CSS:

.container {
    width: 340px
}

.box {
    float: left;
    width: 100px;
    height: 80px;
    border: 1px solid #000;
    margin: 0 10px 10px 0;
}

.box.expanded {
    width: 212px;
}

html:

<div class="container">
    <div class="box">content 1</div>
    <div class="box">content 2</div>
    <div class="box">content 3</div>
    <div class="box">content 4</div>
    <div class="box">content 5</div>
    <div class="box">content 6</div>
    <div class="box">content 7</div>
    <div class="box">content 8</div>
    <div class="box">content 9</div>
</div>

j查询:

$('.box').click( function() {

    // if things have been swapped about, undo it
    swapped = $('.box.swapped');
    swapped.insertBefore( swapped.prev() ).removeClass('swapped');

    //remove expanded
    $('.box.expanded').removeClass('expanded');

    // swap boxes if it's the last box in a row
    clicked = $(this);
    if ( clicked.position().left > 200 ) {
        clicked.addClass('swapped').insertAfter( clicked.next() );
    }

    clicked.addClass('expanded');

} );