Question

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

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

他们需要调整大小。使用jQuery，我可以实现可调整大小的功能，但是现在，我找到了一个＆＃34;＆＃34;。

当我调整任何列的大小时，如果一个或多个兄弟姐妹达到＆＃34;容器＆＃34;的限制，他们会跳转到新行而不是停止调整大小。您可以看到示例here。

我想在拉斯维加斯兄弟姐妹达到父母限制时停止调整大小。我尝试了很多次，没有任何帖子可以谈论它，也没有任何解决方法让我看到工作。

Answer 1

我已将white-space: nowrap;添加到您的容器中，以防止出现故障。

现在要根据多个元素来控制调整大小，我能想到的就是在resize事件上添加一个js威胁，告诉当子节点宽度的总和达到父节点宽度时保持大小，如下所示：

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

引起的商品之间的填充

这是小提琴：http://jsfiddle.net/Yz9K2/2/

为什么兄弟姐妹div在调整大小时会跳到新线？

1 个答案: