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

Question

我目前在以下页面上工作:

使用以下代码在jQuery中修改了divResizable $().ready()

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

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

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

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

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

我究竟会用jQuery做到这一点？

Answer 1

演示 - 您的布局可以处理此问题.如果你包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 { }