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

发布于 2024-11-08 12:21:19 字数 705 浏览 5 评论 0原文

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

schema of the page

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 做到这一点？

原文

I currently work on the following page:

schema of the page

divResizable has been modified by jQuery using the following code in $().ready()

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

As you can see, I try to increase the width of divContent when divResizable gets smaller and the other way around. However, with this code, divContent doesn't always "grow" to the left side only, it sometimes extends to the right side to the irrelevant div, which doesn't make the resizing look good at all.

Is there any input for a more sophisticated method to let the width of those 2 divs correspond?

Something I could think of would be to set width of divContent to

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

How exactly would I do this using jQuery?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

失与倦＂ 2024-11-15 12:21:19

演示 - 您的布局可以处理此问题。如果将ressized和content包裹在一起，则只需要调整ressized的宽度：

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

Demo - Your layout can handle this. If you wrap resizable and content together, you only need to adjust resizable's width:

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

回复收藏 0 原文

多孤肩上扛 2024-11-15 12:21:19

试试这个：

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

Try this:

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

回复收藏 0 原文