使用JQuery，如何强制一个可调整大小的div以适应其子控件？

附件中的图片有一些关于我希望这个可调整大小的div如何工作的信息。

基本上，我希望div能够垂直或水平设置控件

也就是说，假设我在div中动态生成了一组控件，在本例中：

<style type="text/css">
    button { width: 100px; }
    input { width: 100px; }    
</style>
<div id="block">
    <div id="content">
        <button id="btn1">Button One</button>
        <button id="btn2">Button Two</button>
        <input id="txb1"></input>
        <button id="btn3">Button Three</button>
    </div>
</div>

但它可以是任意数量的按钮、文本框、组合框等

以下是迄今为止我在

如果你玩小提琴，你会发现当调整高度时，div不符合它的子对象

---

它没有按照我希望的方式工作，希望得到一些帮助/见解。谢谢。

此代码段尝试在任何配置中容纳子div的高度，设置了最小宽度，并且有一个计算最大宽度的函数，但此函数已被注释掉，因为它有效地锁定了可调整大小-我不确定您是否想要，但您可以取消注释查看

请注意，隐藏按钮与模拟新内容的方式不同，因为maxheight函数查找最后一个子div的高度，如果该函数具有display:none，则它假定最后一个子div的底部为零。因此，“显示”按钮已调整为附加新按钮

var block=$block； var content=$divContent var cons=content.children.length*20； var numberOfControls=content.children.length； var控制高度=20； var=5； var totalwidth=0； var totalheight=0； var minwid=0； var-maxwid=0； var minhi=0； var maxhi=0； var arrwid=[]； block.readyFunction{ //--初始化值 总宽度=0； //--查找控件长度之和以设置最大宽度 maxwid=getMaxWidth+padding； //--找到长度最长的控件作为最小宽度 minwid=getMinWidth+padding； //--查找要设置高度的控件数 maxhi=getMaxHeight； //--查找最小高度 minhi=控制高度； }; 可拖动的块； 函数res{ 块。可调整大小{ maxWidth:maxwid， minWidth:minwid， maxHeight:maxhi， minHeight:minhi， 调整大小：function{ block.heightgetMaxHeight； //block.widthtotalwidth； //content.widthtotalwidth+400； //总宽度； } }; } $window.loadfunction{ res；//为以后的重置定义 }; 函数getMaxWidth{ content.children.eachfunctioni，val{ totalwidth=totalwidth+$+val.id.width+填充； }; 返回总宽度； } /* 函数getMaxWidth{ var tempWidth=[]； content.children.eachfunctioni，val{ tempWidth.push$this.outerWidth； }; totalwidth=Math.max.applynull，tempWidth； 返回总宽度； }//此函数将获得最大当前宽度，但与maxheight结合使用将有效锁定大小调整器。 */ 函数getMinWidth{ var arrwid1=[]； content.children.eachfunctioni，val{ arrwid1.推送$this.width； }; minwid=NumberMath.max.applynull，arrwid1+填充； $'w'.text'minwidth='+minwid； 返回minwid； } 函数getMaxHeight{ var dcon=$'divContent'.children.last， 总宽度=dcon.position.top+dcon.height； $'h'.text'height='+总宽度； 返回总宽度； } 函数getMinHeight{ return controlheight；//--单个控件的高度。 } 函数重新计算维度{ numberOfControls=content.children.length； maxwid=getMaxWidth； minwid=getMinWidth； maxhi=getMaxHeight； minhi=getMinHeight； } $'btnDisplayBTN'。单击函数{ $'divContent'。附加'new button！'； 重新计算尺寸； 物件； }; $'btnGetHeight'。单击功能btnGetHeight\u单击{ alertnumberOfControls+填充*控制高度； }; 挡块{ 边框：1px纯红； 背景色：红色； 宽度：300px； 填充：5px } 显示{ 宽度：100px； } 白昼{ 宽度：100px； } .btnNewBTN{ 宽度：100px； } divContent{}div{ 宽度：100%； } 监视器{ 位置：固定； 底部：2米； } 陈列 总高度

---

我需要澄清一下。在实时示例中，我可以根据自己的喜好调整红色部分的大小。内容会相应调整大小，那么有什么问题吗？抱歉。如果查看4处的图像，您将看到示例中的红色div可以延伸超过子控件的高度。我不想要额外的红色空间。我希望这有帮助。编辑：我想我希望它像紧身弹力裤一样。如果我体重增加，裤子就会膨胀。但如果我减掉一吨体重，它仍然会紧紧抓住我。这条裤子不会变松。呵呵。你试过设置maxHeight选项吗？建议maxhi=numberOfControls*controlheight+padding；