使用jQuery-Resizable調整2個div的寬度

Question

我目前在以下頁面上工作：

使用$().ready()的以下代碼，jQuery修改了divResizable。ready $().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 { }

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中包裝' divresizable '和' divContent '， 寬度設置為兩個包含div的總和