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

Question

我目前正在处理以下页面:

divResizable 已被 jQuery 使用 $().ready() 中的以下代码修改

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

如您所见，我尝试在 divResizable 变小时增加 divContent 的宽度，反之亦然。然而，使用这段代码，divContent 并不总是只“增长”到左侧，它有时会扩展到右侧到不相关的 div，这根本不会使调整大小看起来很好。

是否有更复杂的方法让这 2 个 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 { }