用javascript移动div

Question

这是我的问题，我有一个div，里面有2个div，一个居中，另一个固定在左边，问题是当我调整屏幕大小时，居中的div与固定的div重叠，我想要做的是检测当居中的div与其他div重叠并用javascript更改其左侧值时，但没有工作，有什么想法？

这是我的设计：

<div id="content-wrap"> 
    <div id="content"> 
    </div> 
    <div id="leftbar"> 
    </div> 
</div> 

和CSS：

#content-wrap 
{ 
    clear: both; 
    float: left; 
    width: 100%; 
} 
#content 
{ 
    text-align: left; 
    padding: 0; 
    margin: 0 auto; 
    height: 470px; 
    width: 760px; 
    overflow: auto; 
} 
#leftbar 
{ 
    background-color: transparent; 
    width: 200px; 
    height: 470px; 
    position: absolute; 
    top: 185px; 
    left: 50px; 
} 

，这是javascript代码：

window.onload = function Centrar() { 
    var leftBar = $get("leftbar"); 

    if (leftBar != null) { 
     var content = $get("content"); 
     var size = leftBar.offsetLeft + leftBar.offsetWidth; 
     if (content.offsetLeft < size) {    
      content.style.left = size + 20 + 'px'; 
      }    
    } 
} 

预先感谢任何帮助。

Answer 1

最简单的解决将是应用min-width您#content-wrap容器防止发生重叠：

#content-wrap { 
    clear: both; 
    float: left; 
    width: 100%; 

    /* #leftbar width x 2 + #content width */ 
    min-width: 1160px; 
} 

但是，如果你想使用JavaScript，你需要将代码附加到窗口负载和调整事件：

$(window).bind('load resize', function() { 
    var content = $('#content'); 
    var leftbar = $('#leftbar'); 

    // get the right edge of the #leftbar 
    var leftbarEdge = leftbar.width() + leftbar.offset().left; 

    // check if an overlap has occured and adjust #content left position if yes 
    if (leftbarEdge > content.offset().left) { 
     content.css({ 
      left: leftbarEdge - content.offset().left 
     }); 
    } 
}); 

你需要申请得到这个工作是设置#content到position: relative在CSS所以它尊重left属性哟最后改变你用Javascript设置：

#content { 
    position: relative; 
    /* remaining css */ 
} 

你可以看到它in action here。