Css 固定的半列，而另一半滚动

我正在努力想办法做一些很难解释的事情。我已经设置了一个测试

当你访问那个网站时，你会看到我有一个左右栏。左栏固定到位，向下滚动时，只有右栏滚动。我在里面放了一些彩色图片来展示这一切

我想在右边做的是让两个图像并排，而不是一个在另一个下面。要做到这一点，我可以做到

.project {
    float: left;
    width: 50%;
}

现在，它将以我希望的方式显示图像

但是，如果现在滚动，您会注意到左侧部分向下滚动到底部，而不是像以前一样保持固定

如何在保持左侧部分不变的情况下进行更改

---

谢谢

您有一些JS在滚动时从左侧面板中删除了类“title--fixed”，这意味着它失去了位置：fixed。如果添加位置：固定到

.chapter .chapter__title {
    position: fixed
}

---

这应该可以解决

您有一些JS在滚动时从左侧面板中删除了类“title--fixed”，这意味着它失去了位置：fixed。如果添加位置：固定到

.chapter .chapter__title {
    position: fixed
}

---

这应该可以解决

您可以更改包含项目图片的列表元素的样式，而不是更改

.project

我添加了

显示：内联块添加到列表中。看起来像是你想要的效果


Edit1:我还添加了
width:49%

新图片：



Edit2:如果您必须在这些彩色方框之间没有空格，那么使用flex是一种很好的方法

在父标记（
）中添加样式，使其成为具有行环绕的flex。然后可以将孩子的宽度设置为50%

根据Chrome的开发者工具，这应该添加在styles.css的3238行

nav > ol, nav > ul {
    display: flex;
    flex: wrap;
}

注意：这至少适用于
内联块
和
块
子元素。
您可以更改包含项目图片的列表元素的样式，而不是更改
.project

我添加了
显示：内联块添加到列表中。看起来像是你想要的效果


Edit1:我还添加了
width:49%

新图片：



Edit2:如果您必须在这些彩色方框之间没有空格，那么使用flex是一种很好的方法

在父标记（
）中添加样式，使其成为具有行环绕的flex。然后可以将孩子的宽度设置为50%

根据Chrome的开发者工具，这应该添加在styles.css的3238行

nav > ol, nav > ul {
    display: flex;
    flex: wrap;
}

注意：这至少适用于
内联块
和
块
子元素。
是否尝试将右列的位置设置为
相对
？请再添加一些代码或JSFIDLE：您是否尝试过将右侧列的位置设置为
relative
？请再添加一些代码或一个JSFIDLE：谢谢，工作非常完美：-）我正在努力解决的一件事是49%。当设置为50时，它会落在新行上。这看起来好像是因为某个地方有一些很小的填充/空白。但我似乎找不到这是在哪里。你看到这个填充物是从哪里来的吗？Thanks@kate_hudson这是
内联块
的副产品。如果HTML中的元素之间有空间，那么当您在浏览器上看到它们时，元素之间会有一点空间。如果你想解决这个问题，你会看到很多很好的工作，但俗气的方式来摆脱空间。不过这里的空间看起来不错，伊姆霍。@kate_hudson这是最好的解决方案。根据caniuse的说法，除了IE之外，它对任何东西都很有效。谢谢，效果很好：-）我正在努力解决的一件事是49%。当设置为50时，它会落在新行上。这看起来好像是因为某个地方有一些很小的填充/空白。但我似乎找不到这是在哪里。你看到这个填充物是从哪里来的吗？Thanks@kate_hudson这是
内联块
的副产品。如果HTML中的元素之间有空间，那么当您在浏览器上看到它们时，元素之间会有一点空间。如果你想解决这个问题，你会看到很多很好的工作，但俗气的方式来摆脱空间。不过这里的空间看起来不错，伊姆霍。@kate_hudson这是最好的解决方案。根据caniuse的说法，除了IE之外，它对任何东西都很有效。