javascript - 使用 Javascript 将元素包裹在 div 中

Question

我对窗口调整大小时的 div 对齐问题感到非常恼火。我想将元素包装在 div 中，这样它们就不会在窗口调整大小后脱离它们的确切位置。有没有办法可以<div>使用 Javascript 将元素包装在父元素中。resize()还建议使用javascript（如处理和zoom()事件）来克服这个问题的任何最佳方法。如果不建议使用 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/