CSS горизонтальное размещение нескольких фотографий в одной строке: Firefox Issue

Question

Я прочитал несколько вопросов по этой теме, и я пробовал разные методы, и я не могу решить следующую проблему.

Я создал галерею фотографий, которые размещены в одном горизонтальном ряду. Существует родительский контейнер DIV, который составляет 100% от браузера. Он имеет дочерний контейнер DIV с большой шириной (4000 пикселей +) для хранения изображений внутри в одной строке. С помощью некоторого кода PHP фотографии автоматически помещаются в папку.

Вся система отлично работает в Chrome, Safari и Opera. Несмотря на то, что у меня есть 4 фотографии, а у ребенка DIV высокая ширина, браузер останавливает горизонтальную прокрутку рамки галереи после четвертой фотографии.

В Firefox, однако, браузер отображает полное пробел после последней фотографии. Это означает, что вы можете прокручивать в течение длительного времени после отображения последней фотографии. Я пробовал разные способы решения этой проблемы, но я не могу этого сделать.

CSS-:

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

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

 

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

Answer 1

Вы можете быть в состоянии достичь этого более простым способом. Поскольку изображения являются встроенными элементами, вы можете настроить свой код таким образом и получить эффект горизонтальной прокрутки, который будет идеально соответствовать количеству изображений.

CSS

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

HTML

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