css - 固定半列而另一半滚动

Question

我正在尝试弄清楚如何做一些很难解释的事情。我设置了测试here

当您访问该站点时，您会看到我有左右栏。左列固定到位，向下滚动时，只有右列滚动。我在其中放了一些彩色图片来展示这种情况。

我想在右侧做的是并排放置两张图片，而不是一张放在下面。为此，我可以做到

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

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

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

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

谢谢

Answer 1

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

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

---

Edit1:我还添加了 width: 49%; .

新图片:

---

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

对于父标签 ( <ul> )，您添加样式以使其成为带换行的 flex 标签。然后你可以将 child 的宽度设置为 50%。

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

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

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