使用JQuery，如何實施可調整大小的div以使其適合其子控件？

Question

附件中的圖片提供了一些有關如何調整此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>

但可以是任意數量的按鈕，文本框，組合框等。

到目前為止，這是我在JSFiddle中對JQuery的了解

如果您使用小提琴演奏，則會發現在調整高度大小時div不符合其子級。

我不喜歡它，但是希望獲得幫助/了解。 謝謝。

Answer 1

此代碼段嘗試擁抱子div的高度，無論它們出現在哪個配置中，都設置了最小寬度，並且有一個計算最大寬度的函數（此函數已被注釋掉，盡管因為此函數有效地鎖定了可縮放性-我不確定您是否想要，但您可以取消評論）。

請注意，隱藏按鈕與模擬新內容的方式不同，因為maxheight函數將查找最后一個子div的高度，如果該display:none則它假定最后一個子div的底部為零。 因此，已將“顯示”按鈕改編為添加新按鈕。

 var block = $("#block"); var content = $("#divContent") var cons = content.children().length * 20; var numberOfControls = content.children().length; var controlheight = 20; var padding = 5; var totalwidth = 0; var totalheight = 0; var minwid = 0; var maxwid = 0; var minhi = 0; var maxhi = 0; var arrwid = []; block.ready(function(e) { //--- initialize values totalwidth = 0; //--- Find the sum of lengths of controls to set the maximum width maxwid = getMaxWidth() + padding; //--- Find the control with the longest length for minimum width minwid = getMinWidth() + padding; //--- Find number of controls to set the height maxhi = getMaxHeight(); //--- Find minHeight minhi = controlheight; }); block.draggable(); function res() { block.resizable({ maxWidth: maxwid, minWidth: minwid, maxHeight: maxhi, minHeight: minhi, resize: function(e) { block.height(getMaxHeight()); //block.width(totalwidth); //content.width(totalwidth + 400); //alert(totalwidth); } }); } $(window).load(function() { res(); // defined for later resetting }); function getMaxWidth() { content.children().each(function(i, val) { totalwidth = totalwidth + $("#" + val.id).width() + padding; }); return totalwidth; } /* function getMaxWidth() { var tempWidth = []; content.children().each(function(i, val){ tempWidth.push($(this).outerWidth()); }); totalwidth = Math.max.apply(null, tempWidth); return totalwidth; } // this function will get you the maximum current width, but combined with maxheight will effectively lock your resizer. */ function getMinWidth() { var arrwid1 = []; content.children().each(function(i, val) { arrwid1.push($(this).width()); }); minwid = Number(Math.max.apply(null, arrwid1)) + padding; $('#w').text('minwidth =' + minwid); return minwid; } function getMaxHeight() { var dcon = $('#divContent').children().last(), totalwidth = dcon.position().top + dcon.height(); $('#h').text('height =' + totalwidth); return totalwidth; } function getMinHeight() { return controlheight; //--- Height of a single control. } function recalculateDimensions() { numberOfControls = content.children().length; maxwid = getMaxWidth(); minwid = getMinWidth(); maxhi = getMaxHeight(); minhi = getMinHeight(); } $('#btnDisplayBTN').click(function() { $('#divContent').append('<button class="btnNewBTN">new button!</button>'); recalculateDimensions(); res(); }); $('#btnGetHeight').click(function btnGetHeight_Click() { alert((numberOfControls + padding) * controlheight); }); 

 #block { border: 1px solid red; background-color: red; width: 300px; padding: 5px } #btnDisplayBTN { width: 100px; } #btnGetHeight { width: 100px; } .btnNewBTN { width: 100px; } #divContent {} div { width: 100%; } #monitor { position: fixed; bottom: 2em; } 

 <link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> <div id="block"> <div id="divContent"> <button id="btnDisplayBTN">Display</button> <button id="btnGetHeight" click="btnGetHeight_Click()">Total Height</button> <input id="txb" /> </div> </div> <div id='monitor'> <div id='h'></div> <div id='w'></div> </div>