html - 单行CSS水平内联多张照片放置: Firefox Issue

Question

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

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

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

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

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>