Сделать содержимое горизонтально прокрутить внутри div

Question

У меня есть подразделение, в котором я хочу показать изображения и щелкнуть их, чтобы открыть в лайтбоксе. Я поместил их влево и отобразил их в строке. установите 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
}

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

Answer 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; }

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

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

Answer 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;
}

, который также при необходимости выровнял бы изображения разной высоты по вертикали

код теста

Answer 3

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

Answer 4

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

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

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

div#insideDiv{
    width:800px;
}

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

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

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

Answer 5

@ marcio-junior's answer (https://stackoverflow.com/a/6497462/4038790) работает отлично, но я хотел объяснить для тех, кто не понимает, почему это работает:

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

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

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

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