css - indexhibit 中的响应水平滚动 div 的宽度太大

Question

我正在 indexhibit 中构建一个投资组合，其中所有图像页面都使用水平 div 滚动图像。

我不喜欢降低图像质量的方式，并希望它们看起来与访问者屏幕允许的一样大（不超过它），所以我让它们具有响应性（高度：90%；宽度：自动；）。

问题是：水平容器 div 的宽度是所有原始图像的大小（根据 indexhibit 格式的构建） - 在所有图像的右侧留下一个大的空白区域。这是因为图像被缩小以适应屏幕响应 - 所以我想如果你有足够大的屏幕尺寸，这些图像实际上会

如果我使容器 div 宽度：自动，它显然会将图像拆分到下一行。

我可以用 CSS 做些什么来解决这个问题吗？我没有信心用这个 cms 进入和修改核心文件。

谢谢

迈克·查默斯

Answer 1

我玩弄了图像的显示方式，并且 inline-block 解决了它。容器需要进行一些更改才能使其水平显示。这是基本代码：

#img-container {
overflow-x: scroll;
overflow-y: hidden;
white-space:nowrap;
}
.img-div {
    display: inline-block;
}