Сила строки изображений

Question

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

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

Вы можете увидеть страницу здесь: http://werewolf.phantomlimb.net/

и CSS здесь: http://werewolf.phantomlimb.net/wolf.css

Чтобы удалить пробелы между изображениями я плавал их слева.

Вопрос заключается в том, что во избежание обертывания изображений даже с атрибутом высоты на div контейнера и отображением: block Я должен предоставить значение div шириной, в этом случае 4000 пикселей. Ширина авто, например, заставляет изображения обертываться на новую строку, что я не хочу!

Как я могу не всегда знать точную ширину комбинированных изображений, есть ли значение ширины, которое я могу использовать, чтобы заставить изображения оставаться в одной строке или какой-либо другой трюк CSS?

Большое спасибо.

J

Answer 1

Я хотел бы использовать встроенный блок для такого рода вещи.

Что-то вроде этого:

#imgHolder{ 
    font-size: 0px; /* Remove the spaces between the images */ 
    white-space: nowrap; /* Prevent the images from wrapping */ 
} 

#imgHolder img{ 
    display: inline-block; 
    vertical-align: top; 
    height: 654px; 
    width: auto; 
} 

Вот рабочий пример:

http://jsfiddle.net/155ukfwp/