Javascript jQuery UI多个可调整大小的div不大于父div

我有一个父div。父div包含五个其他div（彼此相邻）。我想做的是，用jQueryUI调整这些div的大小

问题是（这使我感到困难），所有五个div的可调整宽度不能大于父div的宽度。例如：

• 比方说，父类div的宽度为500px（在我的屏幕上是100%）
• 父div内的每个div的宽度为100px（包括边距和边框）

当div1从100px宽度调整到200px宽度时，会发生以下情况：

• div1现在的宽度为200px
• 分区2、3、4和5的宽度为75px（因为500px-300px=200px/4=75px）

我在下面添加了一个代码示例和一个图像。我使用了在StackOverflow上找到的一个示例，并对其进行了调整。为什么这个例子不能正常工作？为什么div会移动到下一行，而不是停在屏幕的末尾

谢谢你的帮助

正文，html{
保证金：0；
填充：0；
}
#应用程序{
宽度：100%；
身高：100%；
}
#结果柱{
宽度：计算（100%-20px）；
高度：计算（100%-20px）；
填充：10px；
}
.圆柱容器{
最小宽度：100px；
身高：100%；
背景色：#eeeeee；
浮动：左；
边框顶部：1px实心#333333；
边框底部：1px实心#333333；
左边框：1px实心#333333；
}
.lastColumnContainer{
右边框：1px实心#333333；
}
.列标题{
字体大小：16px；
字体大小：粗体；
文本对齐：居中；
}
.专栏内容{
字体大小：14px；
文本对齐：左对齐；
}
标题1
内容1
标题2
内容2
标题3
内容3
标题4
内容4
标题5
内容5
makeResizeable（）；
函数makeResizeable（）{
$（“#resultColumns.columnContainer:eq（0）”。可调整大小({
maxWidth:getMaxWidth（$（“#resultColumns.columnContainer:eq（0）”），
停止：updateMaxWidth，
句柄：“e”
});
$（“#resultColumns.columnContainer:eq（1）”。可调整大小({
maxWidth:getMaxWidth（$（“#resultColumns.columnContainer:eq（1）”），
停止：updateMaxWidth，
句柄：“e”
});
$（“#resultColumns.columnContainer:eq（2）”。可调整大小({
maxWidth:getMaxWidth（$（“#resultColumns.columnContainer:eq（2）”），
停止：updateMaxWidth，
句柄：“e”
});
$（“#resultColumns.columnContainer:eq（3）”。可调整大小({
maxWidth:getMaxWidth（$（“#resultColumns.columnContainer:eq（3）”），
停止：updateMaxWidth，
句柄：“e”
});
$（“#resultColumns.columnContainer:eq（4）”。可调整大小({
maxWidth:getMaxWidth（$（“#resultColumns.columnContainer:eq（4）”），
停止：updateMaxWidth，
句柄：“e”
});
}
函数getMaxWidth（e）{
返回$（'#resultColumns'）.width（）-e.sillides（）.outerWidth（）-10；//10px用于边框（每个2个）-总共5个div
}
函数updateMaxWidth（e，ui）{
ui.element.sibles（）.resizeable（'option'，'maxWidth'，getMaxWidth（ui.element.sibles（））；
}

这里的问题是，您必须计算每个可调整大小的切片，包括边框。最初，您将查看第一个元素并计算其他同级元素上的

maxWidth

。对于你的例子，这是其他4个元素

如果抓取其他元素中的一个，比如第三个元素，则需要更新其他剩余的下一个同级元素，以便它们的

maxWidth

是剩余的部分

$（函数（）{
函数getPad（o，d）{
返回parseInt（o.css（“padding-”+d））；
}
函数getMaxWidth（o）{
var mw=parseInt（o.parent（）.innerWidth（））-（getPad（o.parent（），“左”）+getPad（o.parent（），“右”）；
var sbw=2；//第一个和最后一个边框
o、 同级（“.columnContainer”）。每个（函数（i，el）{
sbw+=parseInt（$（el）.width（））+1；//内边框
});
返回mw-sbw；
}
函数makeResizeable（）{
$（'#resultColumns.columnContainer'）。可调整大小({
句柄：'e'，
maxWidth:getMaxWidth（$（“#resultColumns.first”），
调整大小：功能（e、ui）{
log（$（this.width（），getMaxWidth（$（this））；
},
停止：功能（e、ui）{
$（this）.sides（）.each（函数（i，el）{
$（el）.可调整大小（“选项”，“最大宽度”，getMaxWidth（$（el））；
});
}
});
}
makeResizeable（）；
});
html，
身体{
保证金：0；
填充：0；
}
#应用程序{
宽度：100%；
身高：100%；
}
#结果柱{
宽度：计算（100%-20px）；
高度：计算（100%-20px）；
填充：10px；
}
.圆柱容器{
最小宽度：100px；
身高：100%；
背景色：#eeeeee；
浮动：左；
边框顶部：1px实心#333333；
边框底部：1px实心#333333；
左边框：1px实心#333333；
}
.最后{
右边框：1px实心#333333；
}
.列标题{
字体大小：16px；
字体大小：粗体；
文本对齐：居中；
}
.专栏内容{
字体大小：14px；
文本对齐：左对齐；
}

标题1
内容1
标题2
内容2
标题3
内容3
标题4
内容4
标题5
内容5
T