我正在 indexhibit 中构建一个作品集,其中所有图像页面都使用水平 div 来滚动图像。
我不喜欢图像质量下降的方式,并希望它们在访客屏幕允许的范围内显示得尽可能大(不会越过),所以我让它们具有响应性(高度:90%;宽度:自动) ;).
问题是:水平容器 div 的宽度是所有原始图像的大小(根据构建的 indexhibit 格式)- 在所有图像的右侧留下一个大的空白区域。这是因为图像被缩小以适应屏幕 - 所以我想如果你有足够大的屏幕尺寸,这些图像实际上会
如果我将容器 div 设置为 width: auto,它显然会将图像拆分到下一行。
我可以用 CSS 做些什么来解决这个问题 - 我没有信心进入并使用这个 cms 修改核心文件。
谢谢
迈克·查默斯
最佳答案
我试过图像显示的方式,内联 block 解决了它。容器需要一些更改才能水平显示。这是基本代码:
#img-container {
overflow-x: scroll;
overflow-y: hidden;
white-space:nowrap;
}
.img-div {
display: inline-block;
}
关于css - indexhibit 中的响应式水平滚动 div 的宽度太大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25929136/