CSS - 固定Div旁邊的相對Div Div

我正在開發一個響應網站，以便在移動設備和桌面設備上工作。該網站有一個左手菜單。在桌面模式下，我總是希望它可見，在移動中，我希望它隱藏默認情況下，但用一個按鈕打開它。我實際上有2個div。一個用於固定的左側菜單，另一個用於我想要相對的剩餘內容，當左側菜單不可見時，我希望它移動到頁面的最左側。CSS - 固定Div旁邊的相對Div Div

#sidebar-wrapper { 
    position: fixed; 
    left: 0; 
    width: 60%; 
    height: 100%; 

    max-width: 200px;  
    } 

    #page-content-wrapper { 
    position:relative; 
    left: 0; 
    }

我的問題是，網頁內容的div總是在左邊的菜單後面。我不會把它放在相對位置。我可以將左側設置爲200px，但這意味着當左側菜單不可見時，主要div仍然位於左側200px，當我要將它移動到左側時。

Fiddle

來源

2015-07-03 keitn

能否請您分享的jsfiddle檢查或網址是什麼？ –

使用jsfiddle鏈接更新的問題。我想要的是，當左邊的div被隱藏，另一個div移動到最左邊的位置 – keitn

另一個div已經在最左邊的位置。或者，如果您的意思是_在左邊的路上，給身體一個0.的邊距。 –

相對定位是不相對於其他元件，它是相對於在元件將在頁面上流動。如果你想讓你的綠色div始終與你的紅色div相同，你應該使用js或者把你的綠色div放在你的紅色div裏面，並且從包含div的左邊到100％。我也改變了你的代碼，讓你的紅色div離開屏幕左邊，否則它會隱藏它包含的所有內容。

$("#toggle").click(function(){      
    if($("#sidebar-wrapper").css('left') == "0px"){ 
     $("#sidebar-wrapper").animate({left: "-200px"}, 1000);  
    } 
    else{ 
     $("#sidebar-wrapper").animate({left: "0px"}, 1000); 
    } 
});

jsfiddle

來源

2015-07-03 10:56:55 gaynorvader

CSS - 固定Div旁邊的相對Div Div

回答

相關問題