jQuery UI：Container div大小调整

Question

在下面的示例中，在容器div中有两个可拖动的div。当第二个可拖动div被移除时（通过点击按钮）第一个div向上移动并且容器被调整大小（see jsfiddle）。当第二个div被移除时，第一个div不应该移动，因为它的位置是绝对的。这段代码有什么问题？

的HTML：

<div id="container" style="background-color:blue;width:100%;height:100%"></div> 
<button onclick="removeDiv()">Remove</div> 

和JavaScript：

$(document).ready(function(){ 

    var $div0 = $('<div id="div0" />').appendTo('#container'); 
    $div0.draggable(); 
    $div0.offset({ top: 200, left: 350}); 
    $div0.css('background-color','white'); 
    $div0.css('width','150px'); 
    $div0.css('height','200px'); 
    $div0.text(0); 

    var $div1 = $('<div id="div1" />').appendTo('#container'); 
    $div1.draggable(); 
    $div1.offset({ top: 200, left: 50}); 
    $div1.css('background-color','white'); 
    $div1.css('width','150px'); 
    $div1.css('height','200px'); 
    $div1.text(1); 

}); 


function removeDiv() { 
    $('#div0').remove(); 
} 

Answer 1

两个可拖动的div有相对位置。您可以修复起来像这样：

http://jsfiddle.net/isherwood/dzSRR/13/

#container { 
    position: relative; 
} 
#container > div { 
    position: absolute; 
} 

因为他们现在绝对定位的，你需要给父div的高度。如果您使用100%，则还需要将该高度应用于html, body。

http://jsfiddle.net/isherwood/dzSRR/14/