使用 Javascript 将元素包裹在 div 中

Question

I'm feel very irritated with div alignment problems on window resize. I would like to wrap elements inside div so that they won't come out of their exact positions after window resize.Is there a way possible to wrap elements inside parent <div> using Javascript. Also suggest any best ways possible to overcome this using javascript like handling resize() & zoom() events. If not suggest solutions possible by using 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);        
    });
});​

Demo: http://jsfiddle.net/x8Wnw/