HTML картинки горизонтальный ряд

Question

Мне было интересно, есть ли способ сделать так, чтобы у div, содержащего изображения, был переполнение, которое прокручивалось бы горизонтально, как показано на диаграмме ниже:

альтернативный текст http://www.zip -cover.com / development / image_carosoul / slideshow.jpg

как всегда, любая помощь очень ценится

Answer 1

Примерно так должно работать:

#imageContainer { 
  height: 200px;
  overflow: auto; 
  white-space: nowrap; 
}

Убедитесь, что изображения не превышают параметр высоты.

Answer 2

Вам нужно знать ширину и количество изображений внутри div, чтобы предотвратить его перенос:

<div id="outer">
    <div id="inner" style="width: 3200px;">
        <img src="1.jpg" />
        <img src="2.jpg" />
        <img src="3.jpg" />
        <img src="4.jpg" />
    </div>
</div>

И в CSS:

#outer {
    overflow: hidden;
    width: 800px;
    height: 600px;
}

#inner {
    height: 600px;
}

В этом примере предполагается, что ваши изображения имеют размер 800x600 пикселей, при необходимости настройте их.

Answer 3

Попробуйте просто

overflow-x: auto;