Question

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

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

Diagram 1

然后我还有一个onclick JS函数，它将点击的div扩展为第二个图像。 Diagram 2

这适用于前两个div，因为第三个只是被推离边缘。然而，当我打开第三个div时，它会落到下一行并在右上角留下一个间隙（参见第三个图像）。 Diagram 3

我想知道是否有人对如何填补第四个div的差距有任何想法，因为排序无关紧要，所以有一个完整的顶行。（见第四张图） Diagram 4

感谢您的帮助。

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显示设置为表，如下所示：

display:table;

总是连续保持3个div？

3 个答案: