CSS HTML div向左移動無法正常工作

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向左移動時，右側#main上的div不會向左移動。 和div #nav無法正確到達原始位置，即在1秒內沒有出現，當我單擊div時，它不會像感覺那樣移動。 有什么建議么？

Answer 1

按照您的CSS，您尚未為<html> or <body>設置height ，而未為父元素設置高度，則以％指定的高度將不起作用。 因此您的#nav不可見。
您尚未為#main設置任何background或border ，它也沒有任何內容。 因此它也不可見。
檢查此工作區
由於您已為#nav設置了width:100px為#nav設置了width:100px width:100% ， #main #main將細分至下一行，如果您希望它們處於同一水平， #main的寬度#main為

width:calc(100% - 100px) （僅適用於支持css3的高級瀏覽器）

檢查這個小提琴

Answer 2

您應該更新您的JavaScript

marginLeft: "-100"作為marginLeft: "-100px" ， marginLeft: "=0"應為marginLeft: "0"

如果仍然“不起作用”，則表示導航的高度等於0 ...出於測試目的，嘗試將height:100%更新為height:100px 。

CSS HTML div向左移動無法正常工作

問題描述

2 個解決方案

解決方案1
1 2014-03-15 11:56:30

解決方案2
-1 2014-03-15 11:39:18

CSS HTML div向左移動無法正常工作

問題描述

2 個解決方案

解決方案1 1 2014-03-15 11:56:30

解決方案2 -1 2014-03-15 11:39:18

解決方案1
1 2014-03-15 11:56:30

解決方案2
-1 2014-03-15 11:39:18