css - 总是连续保持 3 个 div？

Question

我在对齐 div 时遇到问题。我在一个容器中有 5 个 div，全部向左浮动，如下图所示。

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

然后，我还有一个 onclick JS 函数，它可以将单击的 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>

jQuery：

$('.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');

} );

Answer 2

这是一个解决方案。我试图让它看起来像你在你提供的图像中展示它的方式。要展开单击元素，要删除展开，只需再次单击同一元素（我假设这就是您计划设计的方式）。编辑：包括限制一个元素在给定时刻扩展的功能。一探究竟！

http://jsfiddle.net/jccJs/10/

$('#container > div').click(expand);

function global_remove_expand_except(barring) {
    $('.exp').each(function (i, cur) {
        if (cur !== barring) {
            remove_expand($(cur));
        }
    });
}

function remove_expand($elem) {
    $elem.removeClass('exp');
    if ($elem.hasClass('swapped')) {
        $elem.removeClass('swapped');
        swap_back($elem);
    }
}

function expand() {
    global_remove_expand_except(this);
    var $this = $(this);
    if ($this.hasClass('exp')) {
        remove_expand($this);
    } else {
        $(this).addClass('exp');
        if (!(($.makeArray($this.parent().children()).indexOf(this) + 1) % 3)) {
            swap($this);
            $this.addClass('swapped');
        }
    }
}

function swap($elem) {
    var after = $elem.next();
    $elem.next().remove();
    $elem.before($(after).click(expand));
}

function swap_back($elem) {
    var before = $elem.prev();
    $elem.prev().remove();
    $elem.after($(before).click(expand));
}

HTML

<div id="container" class="cf">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

CSS

*{
    margin:0;padding:0;
}

/*clearfix credits: http://nicolasgallagher.com/micro-clearfix-hack/*/
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}
#container{
    width:350px;
    border:3px solid red;
}

#container > div{
    float:left;
    position:relative;
    width:100px;
    height:35px;
    border:3px solid black;
    margin:5px;
    text-align:center;
}

#container > div.exp{
    background-color:grey;
    width:216px;
    border-color:transparent;
}

#container > div.exp:after{
    position:absolute;
    top:20%;
    left:18%;
    content:"expansion";
}

Answer 3

对于容器，尝试将 CSS 显示设置为 table，如下所示：

display:table;