如何使用CSS将可滚动div放在不可滚动div旁边？

下面是正在发生的事情：

基本上，我试图让我的内容不在垂直导航之下。我在

.content

上尝试了所有不同类型的

position

，还尝试了

float:right也不起作用

语义正确、最有效的执行方法是什么

当前CSS：

div.nav {
float: left;
width: 150px;
margin-right: 20px;
background-color: rgba(102, 153, 204, 1);
height: 100vh;
position: fixed; }

.content {
overflow: auto; }

.wrapper {
width: 880px;
margin: 0 auto;
text-align: left; }

当前HTML：

<div class="wrapper">

    <div class='nav'>
        <ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
    </div>

    <div class='content'>
Lots of text...
</div>
</div>



项目1
项目2
项目3

大量的文本。。。
我给内容区留一个150px的左边距（与导航的宽度相同）

我认为没有其他方法可以使用纯CSS。由于您使用的是导航容器上的position:fixed，因此您将其从文档的正常流程中移除。内容容器将始终位于其下方，除非您使用与导航容器宽度相等的左边距将其向右偏移。
不确定这是否是最佳解决方案，但您可以将内容的左边距设置为150px，以将其与导航相抵消


加上这个

.content {
    overflow: auto;
    margin-left:160px;
}

谢谢，我试过使用
position:absolute
和
left:150px
但没有边距。既然你是第一名，我会记下答案的。嘿，我是第一名！比亚伯·拉吉早一分钟：-）
.content {
    overflow: auto;
    margin-left:160px;
}