使用javascript将div中的元素包裹起来

Question

对于调整窗口大小的div对齐问题，我感到非常烦躁。我想在div中包装元素，以便它们在调整窗口大小后不会出现在他们的确切位置上。是否有可能使用javascript将父元素包装到父级中。同时建议任何可能的最佳方式来解决这个问题，如使用javascript处理resize（）& zoom（）events.If不能通过使用Jquery来实现可能的解决方案。

Answer 1

HTML：

<div id ="top-left"></div> 
<div id ="top-right"></div> 
<div id ="bottom-left"></div> 
<div id ="bottom-right"></div> 

CSS：

div{ 
    width:50px; 
    height:50px; 
    background-color:red; 
    position:absolute; 
} 
#top-left{ 
    top:0; 
    left:0; 
} 
#top-right{ 
    top:0; 
    right:0; 
} 
#bottom-left{ 
    bottom:0; 
    left:0; 
} 
#bottom-right{ 
    bottom:0; 
    right:0; 
} 
div#container{ 
    position:relative; 
    border: 2px solid blue; 
    width:300px; 
    height:300px; 
    background:green; 
} 

的jQuery：

$(document).ready(function(){ 
    $('body').append('<div id="container"></div>'); 
    $('body div').not('#container').each(function() { 
     var html = $(this); 
     $('#container').append(html);   
    }); 
});​ 

演示： http://jsfiddle.net/x8Wnw/