使用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/