我想调整右元素“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);
}
});