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

【问题标题】：CSS horizontal inline multiple photo placement in single row: Firefox IssueCSS水平内联多张照片放置在单行中：Firefox问题
【发布时间】：2015-10-26 19:19:39
【问题描述】：

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

我创建了一个放置在单个水平行中的照片库。有一个父 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;
}

【问题讨论】：

标签： html css gallery photo

【解决方案1】：

您也许能够以更简单的方式实现这一目标。由于图像是内联元素，您可以像这样设置代码并获得水平滚动效果，该效果将完美地适应图像数量。

CSS

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

HTML

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

【讨论】：

完美。唯一的变化是我使用了“overflow-y: hidden;”和“溢出-x：自动；”显示水平滚动条但不显示垂直滚动条以达到最终外观。