使用javascript移动div
使用javascript移动div
提问于 2010-08-30 20:15:24
这是我的问题，我有一个div和里面的两个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';
}
}
}提前感谢您的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2010-08-30 21:15:17
最简单的修复方法是对#content-wrap容器应用min-width，以防止重叠发生：
#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
});
}
});您需要应用的最后一个更改是在CSS中将#content设置为position: relative，这样它就会遵守您使用Javascript设置的left属性：
#content {
position: relative;
/* remaining css */
}你可以在in action here上看到它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3600195
复制相关文章
相似问题
腾讯云开发者
