Сделайте контент горизонтально прокручивающимся в div

У меня есть подразделение, в котором я хочу показывать изображения и нажимать их в лайтбокс. Я разместил их слева и отобразил их в строке. set overflow-x для прокрутки, но он по-прежнему помещает изображения ниже, когда пространство строк недостаточно. Я хочу, чтобы они были встроенными и отображали горизонтальную прокрутку, когда это было необходимо.

ПРИМЕЧАНИЕ. Я не могу изменить структуру изображений внутри. Это должно быть img внутри якоря. Мой лайтбокс требует этого.

HTML:

<div id="myWorkContent">
    <a href="assets/work/1.jpg"><img src="assets/work/1.jpg" height="190" /></a>
    <a href="assets/work/2.jpg"><img src="assets/work/2.jpg" height="190" /></a>
    <a href="assets/work/3.jpg"><img src="assets/work/3.jpg" height="190" /></a>
    <a href="assets/work/4.jpg"><img src="assets/work/4.jpg" height="190" /></a>
    <a href="assets/work/5.jpg"><img src="assets/work/5.jpg" height="190" /></a>
    <a href="assets/work/6.jpg"><img src="assets/work/6.jpg" height="190" /></a>
</div><!-- end myWorkContent -->

CSS

#myWorkContent{
    width:530px;
    height:210px;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
}
#myWorkContent a {
    display: inline;
    float:left
}

Я знаю, что это очень просто, но я просто не могу это сделать. Не знаю, что случилось.

Ответы

Ответ 1

В HTML может быть что-то подобное:

<div class="container-outer">
   <div class="container-inner">
      <!-- Your images over here -->
   </div>
</div>

С этой таблицей стилей:

.container-outer { overflow: scroll; width: 500px; height: 210px; }
.container-inner { width: 10000px; }

Вы даже можете создать интеллектуальный script для вычисления внутренней ширины контейнера, как этот:

$(document).ready(function() {
   var container_width = SINGLE_IMAGE_WIDTH * $(".container-inner a").length;
   $(".container-inner").css("width", container_width);
});

Ответ 2

если вы удалите float: left из a и добавьте white-space: nowrap во внешний div

#myWorkContent{
    width:530px;
    height:210px;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}
#myWorkContent a {
    display: inline;
}

это должно работать для любого размера или количества изображений.

или даже:

#myWorkContent a {
    display: inline-block;
    vertical-align: middle;
}

который также будет вертикально выровнять изображения разной высоты, если требуется

тестовый код

Ответ 3

Проблема в том, что ваш img всегда будет переходить к следующей строке из-за содержащего div.

Чтобы обойти это, вам нужно поместить img в свой собственный div с width достаточно широкий, чтобы удерживать все их. Затем вы можете использовать свои стили как есть.

Итак, когда я устанавливаю img в 120px каждый и помещаю их внутри

div#insideDiv{
    width:800px;
}

все работает.

При необходимости отрегулируйте ширину.

См. http://jsfiddle.net/jasongennaro/8YfRe/

Ответ 4

То же, что и ответ clairesuzy, за исключением того, что вы можете получить аналогичный результат, добавив display: flex вместо white-space: nowrap. Использование display: flex приведет к смене полей "img", если это предпочтение.

Ответ 5

@marcio-junior answer (fooobar.com/info/114166/...) работает отлично, но я хотел объяснить тем, кто не понимает, почему он работает:

@a7omiton Наряду с ответом @psyren89 на ваш вопрос

Подумайте о внешнем div как экране фильма, а внутренний div - в качестве параметра, в котором вокруг фильма персонажа. Если вы просматривали эту настройку лично, то есть без экрана вокруг нее, вы могли бы видеть всех персонажей сразу, потому что у ваших глаз достаточно большое поле зрения. Это означало бы, что установка не должна была прокручиваться (перемещаться влево-вправо), чтобы вы могли увидеть ее больше, и поэтому она останется неподвижной.

Однако вы не находитесь в настройке лично, вы просматриваете его со своего экрана компьютера с шириной 500 пикселей, тогда как настройка имеет ширину 1000 пикселей. Таким образом, вам нужно будет прокрутить (перемещать влево-вправо) параметр, чтобы увидеть больше символов внутри него.

Я надеюсь, что это поможет любому, кто потерялся по принципу.