jquery可调整大小不正确的宽度(jquery resizable incorrect width)

我想调整右边元素“w”并调整中间元素的大小，以便两者的总宽度不会改变。我试图做的是在调整大小时在中间元素上添加/减去px。 info div在调整大小时显示正确的中间宽度，但可见的中间div的宽度与info div中显示的不同。相同的方法工作宽度调整大小“e”，但不是“w”。这是小提琴： http ： //jsfiddle.net/perea1/2j6L9/9/顺便说一句，我不喜欢使用resizeReverse插件。

.wrapper { width:300px; height:80px; background-color:#ccc; } .left { float:left; width:100px; height:80px; background-color:yellow; } .middle { float:left; width:100px; height:80px; background-color:green; } .right { float:left; width:100px; height:80px; background-color:blue; } <div class="wrapper"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> <div class="info1"></div> <div class="info2"></div> $(".right").resizable({ autoHide: true, handles: "w", start: function (event, ui) { startw = $(this).width(); midw = $(".middle").width(); }, resize: function (event, ui) { var resw = $(this).width(); var neww = startw - resw; $(".middle").css("width", ui.originalSize.width + neww); $(".info1").text(resw); $(".info2").text(midw + neww); } });

i wanna resize the right element "w" and fit the size of the middle element,so that the total width of both does not change. What i tried to do is to add/substract the px on the middle element on resize. The info div shows the correct middle width while resizing, but the visible middle div´s width is not the same as shown in info div. The same method works width resize "e", but not "w". Here is the fiddle: http://jsfiddle.net/perea1/2j6L9/9/ Btw, i dont like to use the resizeReverse plugin.

.wrapper { width:300px; height:80px; background-color:#ccc; } .left { float:left; width:100px; height:80px; background-color:yellow; } .middle { float:left; width:100px; height:80px; background-color:green; } .right { float:left; width:100px; height:80px; background-color:blue; } <div class="wrapper"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> <div class="info1"></div> <div class="info2"></div> $(".right").resizable({ autoHide: true, handles: "w", start: function (event, ui) { startw = $(this).width(); midw = $(".middle").width(); }, resize: function (event, ui) { var resw = $(this).width(); var neww = startw - resw; $(".middle").css("width", ui.originalSize.width + neww); $(".info1").text(resw); $(".info2").text(midw + neww); } });