javascript - Javascriptを使用してdiv内の要素をラップする

Question

ウィンドウのサイズ変更でのdivの配置の問題に非常に苛立ちを感じています。ウィンドウのサイズ変更後に要素が正確な位置から外れないように、div内で要素をラップしたいと思います。Javascript<div>を使用して親内で要素をラップする方法はありますか。resize()また、処理やzoom()イベントなどのJavaScriptを使用してこれを克服するための最善の方法を提案します。そうでない場合は、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/