CSS 单行水平内联多张照片放置：Firefox 问题

Question

我已经阅读了关于这个主题的几个问题，并且尝试了不同的方法，但我无法解决以下问题。

我创建了一个照片库，这些照片被放置在一个水平行中。有一个 parent DIV 容器，它是 100% 的浏览器。它有一个 child DIV 容器，宽度较大 (4000px+)，可以将图像放在一行中。使用一些 PHP 代码，照片会自动从文件夹中放入。

整个系统在 Chrome、Safari 和 Opera 中运行完美。即使我有 4 张照片并且 child DIV 的宽度较高，浏览器在第四张照片后停止画廊框架的水平滚动。

但是，在 Firefox 中，浏览器会显示最后一张照片后面的整个空白 space。这意味着在显示最后一张照片后可以滚动很长时间。我尝试了不同的方法来解决这个问题，但我做不到。

CSS:

#photoparent {
 border-top: 1px solid white;
 clear: both;
 height: 600px;
 overflow-y: hidden;
}

#photochild {
 background-color: #000000;
 margin-right: -5800px; 
}


#photochild img {
 float: left;
 padding-right: 3px;
}

Answer 1

您或许可以通过更简单的方式实现这一目标。由于图像是内联元素，您可以像这样设置代码并获得水平滚动效果，该效果将根据图像数量完美调整大小。

CSS

.container {
  overflow-y: scroll;
  white-space: nowrap;
}

HTML

<div class="container">
  <img src="">
  <img src="">
  <img src="">
   ....
</div>

CSS 单行水平内联多张照片放置：Firefox 问题

CSS horizontal inline multiple photo placement in single row: Firefox Issue

html

css

photo

gallery