我正在尝试弄清楚如何做一些很难解释的事情。我设置了测试here
当您访问该站点时,您会看到我有左右栏。左列固定到位,向下滚动时,只有右列滚动。我在其中放了一些彩色图片来展示这种情况。
我想在右侧做的是并排放置两张图片,而不是一张放在下面。为此,我可以做到
.project {
float: left;
width: 50%;
}
这现在显示了我希望它们显示的图像。
但是,如果您现在滚动,您会注意到左侧部分向下滚动到底部,而不是像以前那样保持固定。
如何在保持左侧部分不变的情况下进行更改?
谢谢
最佳答案
也许不是改变你的 .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
子元素。
关于css - 固定半列而另一半滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36499859/