Question

我在左侧浮动的容器内有三个div，每个div占容器宽度的33.3％（1/3）。我希望能够调整其中的任何一个，这将反过来调整最近的兄弟，以便所有三个div的宽度始终是容器宽度的100％。

jquery resizable call：

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

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

有谁知道如何完成我想做的事情？也许有一种方法可以在插件中使用alsoResize选项？

Answer 1

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

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

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

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

1 个答案: