使用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右侧，这样调整大小看起来并不好看。

是否有更复杂的方法来使这两个div的宽度相对应？

我能想到的一个方法是将divContent的宽度设置为

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

我应该如何使用jQuery来实现这个功能呢？

- Dennis Röttger

---

你为什么不将divResizable和irrelevant div嵌套在divContent中并浮动它们呢？只是问一下，以确保你没有忽略一个明显的解决方案。 - Gary Ryan

是的，因为这不是完整的网站（其他元素与此问题无关），将它们放在这个 div 中将不起作用。 - Dennis Röttger

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 { }

- gblazex

---

感谢您的回答，甚至还添加了演示。但我担心这也是我之前遇到的效果。如果我只使用文本框调整宽度，则在浏览器上计算相当容易，但我想使用鼠标动态拖动它（http://jqueryui.com/demos/resizable/）。这就是我在原始问题中提到的问题所在。 - Dennis Röttger

我喜欢看人们自己制造问题。 :) 上面的示例使用CSS进行计算，因此您不必自己动手。要使其可通过鼠标拖动调整大小，您只需要一行JavaScript代码：$( "#resizable" ).resizable();。我也喜欢看人们懒得解决问题。http://jsbin.com/ikemu4/3/ ... 看看“新”的演示... - gblazex

冷静点，小黄花！只是要确保我获得最高可能的赏金服务。不幸的是，#content将始终在#resizable之后进行，这不仅仅是“不酷”，因为它需要重新设计所有背景图片。有没有办法在不让#content落后于#resizable的情况下实现你所做的事情？请检查 http://jsbin.com/ikemu4/7/，红色边框。它不应该向左延伸这么远。 - Dennis Röttger

好的Buttercup :), 我忘记在内容中添加 overflow:hidden 了。http://jsbin.com/ikemu4/9/ - gblazex

是我自己的问题还是演示无法拖动？ - Nullius

Google移除了jQuery UI CSS，我修复了链接。现在可以尝试DEMO了。http://jsbin.com/omewec/1/ - gblazex

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);
    });

- xyd

Answer 3

尝试将 'divresizable' 和 'divContent' 包装在一个 div 中，并将该 div 的 width 设置为两个包含的 div 的宽度之和

- inadcod

---

一旦我尝试调整大小，divContent就会“跳”到另一行。 - Dennis Röttger

也许我错了，但是难道不是更容易将一个具有特定宽度的“包装div”与一个具有特定宽度的“可调整div”结合起来，将“divContent”保持未设置宽度或设置为“自动”，并将调整大小脚本应用于“divResizable”吗？ - inadcod