如何调整浮动元素的大小，使其总宽度始终为父容器的 100%？

Question

我在一个向左浮动的容器内有三个 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 查看我遇到的问题：

jsfiddle

在示例中，我在调整大小事件期间获取容器的宽度并将其与框的总大小进行比较。这应该告诉我当前框是否被缩小或放大，因此最近的兄弟应该被放大或缩小。这显然行不通。

有没有人知道一种方法来完成我想要做的事情？或许有办法在插件中使用 alsoResize 选项？

Answer 1

您只是将nextBox 的宽度增加了+/-1px。我认为您应该将该行替换为以下内容：

var extraWidth = containerWidth - totalSize;
nextBox.width(nextBoxWidth + extraWidth);

第一行告诉你调整大小后的可用空间有多大；然后你增加相同数量的 nextBox 宽度（参见here）