Question

我想弄清楚如何做一些很难解释的事情。我已经设置了测试here

当您访问该网站时，您会看到我有一个左右列。左列固定到位，向下滚动时，只有右列滚动。我在那里放了一些彩色图像来表明这种情况。

我想在右手边做的是并排放置两张图片，而不是一张在彼此之下。要做到这一点，我可以做到

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

现在显示我希望它们显示的图像。

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

如何在保持左侧部分相同的情况下进行更改？

由于

Answer 1

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

我使用浏览器开发人员工具将display: inline-block;添加到列表中。它看起来像你想要的效果。

编辑1：我还添加了width: 49%;。

新图片：

Edit2：如果这些彩盒之间必须没有空格，那么使用flex是一种很好的方法。

对于父标记（<ul>），添加样式以使其成为带有行包装的flex。然后，您可以将孩子的宽度设置为50％。

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

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

注意：这至少适用于inline-block和block子元素。

Answer 2

你有一些JS正在删除课程＆＃39; title - fixed＆＃39;从左侧面板滚动，这意味着它失去了位置：固定。如果你添加位置：固定为

.chapter .chapter__title {
    position: fixed
}

那应该解决