Javascript 使用jQuery Resizeable调整2个div的宽度

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

jQuery使用

$（）.ready（）

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

是否有更复杂的方法可以让这两个div的宽度相对应

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

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

---

使用jQuery我该如何做呢？

尝试在一个div中包装“divresizeable”和“divContent”，并将宽度设置为包含的两个div之和，您的布局可以处理这个问题。如果将

resizeable

和

content

包装在一起，则只需调整

resizeable

的宽度：

HTML

试试这个：

$("#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);
    });

---

为什么不将可调整大小的和不相关的div嵌套在divContent中并浮动它们？只是想确保你没有忽略一个明显的解决方案。是的，因为这不是完整的站点（其他元素与这个问题无关），将它们放在这个div中很不幸根本不起作用。一旦我尝试调整大小，divContent就会“跳”到另一行。也许我错了，但是，将包装div设置为特定宽度、将divresizeable设置为特定宽度、将divContent保留为with set或将其设置为auto并将resize脚本应用于divresizeable不是更容易吗？感谢您的回答，甚至感谢您完成了添加演示的工作。但我恐怕这也是我之前的效果，如果我只是使用文本框调整宽度，那么在浏览器上计算就相当容易了，但我想使用鼠标（）动态拖动它。这就是我在原始问题中提到的问题所在。我喜欢人们为自己制造问题上面的示例使用CSS进行计算，因此您不必这样做。要使其在鼠标拖动时可调整大小，您需要一行javascript:

$（“#resizable”）.resizable（）。我也喜欢人们懒得做事情的时候。。。看“新”的演示…冷静点，毛茛！只是为了确保我的赏金能得到尽可能多的服务。不幸的是，
#内容
总是在
#可调整大小
后面，这不仅仅是“不酷”，因为它需要修改所有背景图片。有没有什么方法可以在不让
#内容
隐藏在
#可调整大小
之后的情况下完成您所做的工作？请核对，红边。它不应该向左走这么远。好吧，毛茛：），我忘了在内容中添加
overflow:hidden
。是我还是试着拖动时演示不起作用？
<div id="page">
  <div id="wrapper">
    <div id="resizable">resizable</div>
    <div id="content">content</div>
  </div>
  <div id="irrelevant">irrlevant</div>
</div>

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

$("#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);
    });