我的html代码
<body>
<div id="head-title">
<div id="box">
<a href="#" id="divhide">
<div>
<div class="whiteline"></div>
<div class="whiteline"></div>
<div class="whiteline"></div>
</div>
</a>
</div>
</div>
<div id="nav">
<?php echo $menu_item?>
</div>
<div id="main">
</div>
</body>
CSS
body
{
margin:0px;
}
#head-title
{
height: 65px;
width: 100%;
background-color: #E67817;
}
#nav
{
float:left;
width:100px;
height:100%;
background: #1e293d;
color: #465269;
}
#main
{
float:left;
width:100%;
height:100%;
}
#box
{
position:absolute;
left:30px;
top:14px;
width:50px;
height:50px;
}
.whiteline
{
margin-top:5px;
border:2px solid white;
width:25px;
}
我正在使用 jquery 将 div #nav 向左移动
<script>
flag= true;
$('#divhide').click(function()
{
if(flag)
{
$("#nav").css("marginLeft","0px").animate(
{
marginLeft: "-100"
}, 1000);
flag = false;
}
else
{
$("#nav").css("marginLeft","-100px").animate(
{
marginLeft: "=0"
}, 1000);
flag = true;
}
});
</script>
但是当 div #nav 向左移动时，右侧的 div #main 没有向左移动。并且 div #nav 没有正确地到达原始位置，即当我单击 div 时它不会在 1 秒内出现，所以不会像感觉一样移动。有什么建议吗？
最佳答案
根据您的 css，您尚未设置
height对于<html> or <body>, 如果没有为父元素设置高度，在 % 中指定的高度将不起作用。所以你的#nav不可见。您还没有设置任何类型的
background或border到#main，它没有任何内容。因此它也是不可见的。检查这个工作FIDDLE
因为你设置了
width:100px对于#nav和width:100%对于#main,#main将分割到下一行，如果您希望它们处于同一级别，请更改#main的宽度到
width:calc(100% - 100px) (对于支持 css3 的高级浏览器
仅)
检查这个fiddle
关于javascript - css html div 向左移动无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22423130/