Question

我对窗口调整大小的div对齐问题感到非常恼火。我想在div中包含元素，以便在窗口调整大小后它们不会从它们的确切位置出来。有可能使用javascript将元素包装在父元素中。同时建议任何可能的最佳方法来使用javascript来解决这个问题，例如处理resize（）＆amp; 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/

使用javascript包装div中的元素

1 个答案: