Question

我对jQuery很新，但我非常喜欢它！赞成开发人员！：）

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

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

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

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

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

我知道$（“。选择器）.resizable（{}）事件，我得到了它的工作。但是当我有两个div在彼此旁边，我正在调整其中一个，它没有移动allong。

提前致谢！

编辑：尽管这个问题被低估了，但我找到了答案，并成了一个JSfiddle。请参阅我对接受的答案的评论。

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

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

希望这也有助于其他人：）

Answer 1

如果您的孩子div使用float:left或display:inline-block进行展示，那么在调整前一个孩子的尺寸后，您不应该采取任何措施来移动孩子。

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

Answer 2

http://jsfiddle.net/MjSfy/1/这很直接。只需将子级与float:left或display:inline-block对齐即可。然后，每当你改变一个child-div的宽度时，父级也会调整。

<强>更新

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

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

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

如何在parent-div中调整div的大小，同时还调整parentdiv的大小？

2 个答案: