使用 Javascript 将元素包裹在 div 中

【问题标题】：Wrap elements inside div using Javascript使用 Javascript 将元素包裹在 div 中
【发布时间】：2012-06-02 18:34:44
【问题描述】：

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

【问题讨论】：

标签： javascript dom-events javascript-framework

【解决方案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/

【讨论】：