使用jQuery-Resizable调整2个div的宽度

Question

我目前正在阅读以下页面：

使用$().ready()

中的以下代码，jQuery修改了divResizable

 $("#divResizable").resizable({ handles: 'e' });
 $("#divResizable").bind("resize", function (event, ui) {
      $('#divContent').width(850 -(ui.size.width - 175));
 });

正如您所看到的，当divResizable变小时，我尝试增加divContent的宽度，反之亦然。但是，使用此代码，divContent并不总是＆＃34;成长＆＃34;仅在左侧，它有时延伸到不相关的div的右侧，这不会使调整大小看起来很好。

是否有更复杂的方法输入让这两个div的宽度对应？

我能想到的是将divContent的宽度设置为

(start of irrelevant - divResizable.width) == 850px
  ^ e.g 1025px          ^ e.g. 175px

我将如何使用jQuery完成此操作？

Answer 1

Demo - 您的布局可以处理此问题。如果您将 resizable 和 content 一起打包，则只需调整 resizable 的宽度：

HTML 的

<div id="page">
  <div id="wrapper">
    <div id="resizable">resizable</div>
    <div id="content">content</div>
  </div>
  <div id="irrelevant">irrlevant</div>
</div>

CSS

#resizable  { float:left; width:175px; }
#content    { overflow:hidden; width:auto; }
#wrapper    { float:left; width:1025px; }
#irrelevant { }

Answer 2

试试这个：

$("#divResizanle").resizable({ handles: 'e' });
    $("#divResizable").bind("resize", function (event, ui) {
        $('#divContent').width(850 -(ui.size.width - 175));
        $('#divContent').css("left",ui.size.width - ui.originalSize.width);
    });

Answer 3

尝试在宽度设置为两个包含div的总和的div中包装'可分割'和' divContent '