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

Question

我正在 indexhibit 中构建一个作品集，其中所有图像页面都使用水平 div 来滚动图像。

我不喜欢图像质量下降的方式，并希望它们在访客屏幕允许的范围内显示得尽可能大(不会越过)，所以我让它们具有响应性(高度:90%；宽度:自动) ;).

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

如果我将容器 div 设置为 width: auto，它显然会将图像拆分到下一行。

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

谢谢

迈克·查默斯

Answer 1

我试过图像显示的方式，内联 block 解决了它。容器需要一些更改才能水平显示。这是基本代码:

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