javascript - 为什么兄弟 div 在调整大小时跳到新行？

Question

我在容器 div 上有多个 div，如下所示:

<div id="container">
    <div class="resizable"></div>
    <div class="resizable"></div>
</div>

并且它们需要调整大小。使用 jQuery 我可以实现可调整大小的东西，但现在，我找到了一个“东西”。

当我调整任何列的大小时，如果一个或多个 sibling 达到“容器”的限制，它们会跳到新的一行而不是停止调整大小。你可以看一个例子 here .

我想在 las 兄弟达到父级限制时停止调整大小。我尝试了很多次，但没有任何帖子讨论它，而且我发现的解决方法都没有奏效。

Answer 1

我已将 white-space: nowrap; 添加到您的容器中以防止元素分解。

现在要根据多个元素来控制你的调整大小，我能想到的就是在调整大小事件上添加一个js威胁，告诉当 child 的宽度之和达到父的宽度时保持尺寸，就像这样:

$('.resizable').resizable({
    handles: 'e',
    containment: '#container',
    resize: function( event, ui ) {
        var parent = ui.element.parent();
        var cw = 0;
        ui.element.siblings().each(function() {
            cw += $(this).width();
        });

        if(parent.width() <= cw + ui.element.width()) {
            ui.element.width(
                parent.width() - cw
            );
        }
    }
});

这将使所有元素保持在容器的限制范围内。你只需要处理你的元素之间的填充，这是由于 inline-block

这是 fiddle :http://jsfiddle.net/Yz9K2/2/