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

时间:2012-07-28 21:49:13

标签: jquery css jquery-ui jquery-ui-resizable

我对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;
            });
});

希望这也有助于其他人:)

2 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:2)

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

<强>更新

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

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

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