如何在父 div 中调整 div 的大小，同时父 div 也调整大小？答案

【问题标题】：How to resize a div, within a parent-div, with parentdiv also resizing?如何在父 div 中调整 div 的大小，同时父 div 也调整大小？
【发布时间】：2012-08-01 00:13:17
【问题描述】：

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

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

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

现在，我希望能够调整（比如说）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;
            });
});

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

【问题讨论】：

我相信使用width:100% 可能会有所帮助。
我认为这是一个非常好的问题，对于刚接触 jQuery 的人来说非常复杂。他清楚地表明他已经考虑过这个问题，彬彬有礼并感谢人们提前提供帮助，而且，由于他是 jQuery 新手，这是一个非常高级的项目。我不明白人们如何或为什么会降级这个问题，特别是因为这个用户对 SO 太陌生了。
@DorianGray：哪个 div 应该在他们的 css 中有这个属性？

标签： jquery css jquery-ui jquery-ui-resizable

【解决方案1】：

如果您的子 div 使用 float:left 或 display:inline-block 显示，则在调整前一个子元素的大小后，您无需执行任何操作来移动子元素。

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

【讨论】：

【解决方案2】：

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

更新：

在运行时使用类似这样的方法来设置 div 的宽度：

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

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

【讨论】：

这是一个很好的可视化示例，但是你能给出一些你会使用的 JS 吗？我认为他的问题更多是在 jQuery 方面
非常感谢！我已经成功地应用了它来使它工作：jsfiddle.net/MjSfy/4 有趣的是它在 jsfiddle 中不起作用，但是当我把它放在 Dreamweaver 中时它会起作用。我不知道为什么，但确实如此。我把它贴在这里给有同样问题的人:)
很高兴它对您有所帮助。附带说明：当您的问题得到解决时，最好关闭一个问题（接受最有帮助的答案）。