javascript 使用 jQuery-Resizable 调整 2 个 div 的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6054880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adjust the width of 2 divs using jQuery-Resizable
提问by Dennis R?ttger
I currently work on the following page:
我目前在以下页面上工作：
divResizable has been modified by jQuery using the following code in $().ready()
jQuery 使用以下代码修改了 divResizable $().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.
如您所见，当 divResizable 变小时，我尝试增加 divContent 的宽度，反之亦然。然而，在这段代码中，divContent 并不总是只向左侧“增长”，它有时会向右侧延伸到不相关的 div，这根本不会使调整大小看起来很好。
Is there any input for a more sophisticated method to let the width of those 2 divs correspond?
有没有更复杂的方法可以让这两个 div 的宽度对应？
Something I could think of would be to set width of divContent to
我能想到的是将 divContent 的宽度设置为
(start of irrelevant - divResizable.width) == 850px
^ e.g 1025px ^ e.g. 175px
How exactly would I do this using jQuery?
我将如何使用 jQuery 做到这一点？
回答by gblazex
Demo- Your layout can handle this. If you wrap resizableand contenttogether, you only need to adjust resizable's width:
演示- 您的布局可以处理这个问题。如果你包resizable和content在一起，你只需要调整resizable的宽度：
HTML
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
CSS
#resizable { float:left; width:175px; }
#content { overflow:hidden; width:auto; }
#wrapper { float:left; width:1025px; }
#irrelevant { }
回答by xyd
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);
});
回答by inadcod
try wrapping 'divresizable' and 'divContent' in a div with widthset to the sum of the two contained divs
尝试将 ' divresizable' 和 ' divContent'包装在一个 div 中，宽度设置为两个包含的 div 的总和
