Jquery 分路器守恒尺寸

我尝试使用“jQueryUI”来实现这样的拆分器：

HTML

CSS:

但我希望另一个部分（没有直接调整大小的部分）保持其大小并被推送

有什么想法吗

---

谢谢=）

你的意思是这样的：

我已经删除了包装器div的宽度

.wrap {
    /*width: 400px;*/
    border: 1px brown solid;
    font-size: 0;
}

在js中，我对更改第二个div宽度的代码进行了注释：

$(function () {
    $(".resizable1").resizable({
        handles: 'e',
        minWidth: '50',
        maxWidth: '350'/*,
        resize: function() {
            var remainingSpace = $(this).parent().width() - $(this).outerWidth();
                divTwo = $(this).next();
                divTwoWidth = remainingSpace - (divTwo.outerWidth() - divTwo.width());
            divTwo.width(divTwoWidth);
        }*/
    });
});

---

是的，但我希望右边的div是可编辑的。我试着从西到东，将类resizeable1改为resizeable2，但它没有正常工作。我只是试着设置dir=“rtl”并将东到西，但有一个奇怪的错误，div也会滑动……不完全清楚你的意思。Resizeable2的右侧部分是否也可以调整大小？要实现这一点，请更改行

$（“.resizable1.resizable2”）.resizable（{

）。

.wrap {
    width: 400px;
    border: 1px brown solid;
    font-size: 0;
}
.resizable {
    width: 200px;
    height: 120px;
    padding: 0.5em;
    background-color: coral;
    display: inline-block;
}
.resizable2 {
    background-color: olive;
}

.wrap {
    /*width: 400px;*/
    border: 1px brown solid;
    font-size: 0;
}

$(function () {
    $(".resizable1").resizable({
        handles: 'e',
        minWidth: '50',
        maxWidth: '350'/*,
        resize: function() {
            var remainingSpace = $(this).parent().width() - $(this).outerWidth();
                divTwo = $(this).next();
                divTwoWidth = remainingSpace - (divTwo.outerWidth() - divTwo.width());
            divTwo.width(divTwoWidth);
        }*/
    });
});