1

我对 jQuery 很陌生，但我非常喜欢它！为开发者点赞！:)

我的问题是关于可调整大小的功能。情况如下：

我有一个 div（parent-div），并且在我有 5 个其他 div（彼此直接相邻，让我们称它们为 div-a 到 div-e）。parent-div 代表一个时间跨度（它越长，它代表的时间越多），五个 childrendiv 代表该时间跨度内的五个阶段。

现在，我希望能够调整（比如说）child-div-c 的大小（它代表的 fase 需要更多时间）。当我调整 C 的大小时，div 的 D 和 E 必须向左移动，因为它们的 fase 只是稍后发生，而不是更短或更长。当我调整 C 的大小时，父 div 也必须调整大小，因为总时间跨度会更长。

我希望这很清楚。问题是：

如何将 div 移动到调整大小的 div 旁边？如何调整父div的大小？

我知道 $(".selector).resizable ({}) 事件，并且我得到了它的工作。但是当我有 2 个 div 彼此相邻时，我正在调整其中一个的大小，它并没有移动。

提前致谢！

编辑：尽管这个问题被否决了，但我找到了答案并制作了一个 JSfiddle。请参阅我对已接受答案的评论。

我的第二个问题的答案是这样的：

$(".selector").resizable( {
       resize: function(event, ui) {
            var widthTotal = 0;
            $(".travelcontainer > .travelfase").each(function(index, element) {
                widthTotal = $(this).innerWidth() + widthTotal;
            });
});

希望这对其他人也有帮助:)

4

2 回答 2

3

如果您的子 div 正在显示，float:left或者display:inline-block您在调整前一个子项的大小后不必做任何事情来移动子项。

如果您的父 div 具有固定宽度，则您必须计算子元素的总数并手动设置（或动画）。

于 2012-07-28T21:54:26.433 回答
2

http://jsfiddle.net/MjSfy/1/这很简单。只需将子 div 与float:leftor对齐display:inline-block。然后，每当您更改一个子 div 的宽度时，父级也会进行调整。

更新：

使用类似这样的东西在运行时设置 div 的宽度：

$("#div-a").css("width", "50px");​

更新的小提琴： http: //jsfiddle.net/MjSfy/2/和http://jsfiddle.net/MjSfy/3/

于 2012-07-28T22:15:59.767 回答