gpt4 book ai didi

javascript - css html div 向左移动无法正常工作

转载 作者:行者123 更新时间:2023-11-28 11:01:26 24 4
gpt4 key购买 nike

我的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 秒内出现,所以不会像感觉一样移动。有什么建议吗?

最佳答案

  1. 根据您的 css,您尚未设置 height对于 <html> or <body> , 如果没有为父元素设置高度,在 % 中指定的高度将不起作用。所以你的#nav不可见。

  2. 您还没有设置任何类型的 backgroundborder到#main,它没有任何内容。因此它也是不可见的。

    检查这个工作FIDDLE

  3. 因为你设置了width:100px对于 #navwidth:100%对于 #main , #main将分割到下一行,如果您希望它们处于同一级别,请更改 #main 的宽度到

width:calc(100% - 100px) (对于支持 css3 的高级浏览器 仅)

检查这个fiddle

关于javascript - css html div 向左移动无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22423130/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com