如何将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 */ }