我在容器中向左浮动三个div，每个div占容器宽度的33.3％（1/3）。我希望能够调整其中任何一个的大小，这些大小将反过来调整最接近的同级的大小，以便所有三个div的宽度始终是容器宽度的100％。
jQuery可调整大小的调用：
var containerWidth = $("#container").width();
$(".box").resizable({
handles: "e",
containment: "#container",
resize: function(e,ui){
var totalSize = ui.size.width;
ui.element.siblings(".box").each(function(){
totalSize = totalSize + $(this).width();
});
var direction = totalSize > containerWidth ? -1 : 1;
var nextBox = ui.element.next(".box");
var nextBoxWidth = nextBox.width();
nextBox.width(nextBoxWidth + direction);
}
});
请使用此jsfiddle查看我遇到的问题：
在示例中，我获取了容器的宽度并将其与resize事件期间的盒子的总大小进行比较。这应该告诉我当前框是否正在缩小或放大，因此最近的同级应该放大或缩小。这显然是行不通的。
有谁知道一种方法来完成我想做的事情？也许有一种方法可以在插件中使用AlsoResize选项？
您只是将nextBox宽度增加+/-1px。我认为您应该用以下内容替换该行：
var extraWidth = containerWidth - totalSize;
nextBox.width(nextBoxWidth + extraWidth);
第一行告诉您调整大小后的可用空间有多大；然后增加相同数量的nextBox宽度（请参见此处）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句