為什么調整大小時同級div跳到新行？

Question

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

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

並且它們需要調整大小。 使用jQuery，我可以實現可調整大小的東西，但是現在，我發現了一個“東西”。

當我調整任何列的大小時，如果一個或多個同級達到“容器”的限制，則它們會跳到新行，而不是停止調整大小。 您可以在此處查看示例。

當同級兄弟達到父級限制時，我想停止調整大小。 我嘗試了很多次，沒有帖子可以談論它，也沒有我認為可行的解決方法。

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/