Question

我的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没有正确地到达原始位置，即不是在1秒内它出现时我点击div所以没有像感觉一样移动。有什么建议吗？

Answer 1

根据你的CSS，你没有为height设置<html> or <body>，没有为父元素设置高度，在％won中指定的高度不起作用。因此，您的#nav不可见。
您尚未将任何类型的background或border设置为#main，并且它没有任何内容。因此，它也不可见。

检查此工作FIDDLE
由于您为width:100px设置了#nav，为width:100%设置了#main，如果您希望#main将#main分解为下一行处于同一级别会将width:calc(100% - 100px)的宽度更改为

{{1}}（适用于支持css3的高级浏览器只）

检查此fiddle

Answer 2

你应该更新你的javascript

marginLeft: "-100"至于marginLeft: "-100px"和marginLeft: "=0"应为marginLeft: "0"

如果仍然“无效”，则表示导航的高度等于0 ...尝试将height:100%更新为height:100px以进行测试。

css html div向左移动不正常

2 个答案: