我想调整右边元素“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); } });最满意答案
我已经在正确的元素上添加了正位数0,现在它可以工作了
$(this).css("left","0");ive added positon 0 on the right element, now it works
$(this).css("left","0");更多推荐
发布评论