html - 如何将div定位在屏幕左侧，将所有内容推到右侧

Question

我正在试验一些东西，我有一个导航栏，我想将它从屏幕的上侧切换到屏幕的左侧。我可以将基本的 div 定位到屏幕的左侧，但我想做的是让它将所有内容推到它的右侧，以便我可以对菜单实现隐藏功能。

CSS

div {
    position: absolute; // also tried fixed
    left: 0px;
    height: 100%;
    width: 100px;
    background: #222222;
    top: 0px;
    bottom: 0px
}

正如您在图像中看到的那样，div 就在左侧，但内容正好覆盖它。有什么方法可以将内容推到div之后的右边吗？任何帮助都会很棒。

Answer 1

将你右边的内容放在一个容器中，然后给它 margin-left 等于左边栏的宽度。所以:

HTML

<div id='right'>
    <!-- all your left right elements go in here -->
</div>

CSS

#right { margin-left: 200px; /* or whatever */ }