Переполнение-x не работает

Я пытаюсь реализовать слайдер для моей галереи. Прямо сейчас, css имеет проблему, в которой переполнение-x не работает должным образом. (Я хочу горизонтальный слайдер и вертикальный свиток)

Здесь скрипка:

Пожалуйста, взгляните.

.testimg{
    height: 100%;
    width: 100%;
}
#testDiv{
    width: 400px;
    overflow: auto;
    float: left;
    overflow-y:hidden;
    border:1px solid black; 
}
.testimgdiv{
    width: 120px;
    height: 100px;
    float: left;
}

Ответы

Ответ 1

После того, как вы разместили элементы, вы удалили их из потока документов, и они не будут рассчитываться по ширине родительского элемента. Вы должны использовать комбинацию display: inline-block для элементов вместо float, а затем использовать white-space: nowrap для родительского white-space: nowrap.

#testDiv{
  width: 400px;
  overflow-x: auto;
  border:1px solid black;
  white-space: nowrap; 
  font-size: 0;
}
.testimgdiv{
  width: 120px;
  height: 100px;
  display: inline-block;
}

скрипка

Примечание. Я использую font-size: 0 чтобы элементы отображались рядом друг с другом.

ОБНОВИТЬ

Поскольку этот пост довольно старый, вероятно, стоит отметить, что это можно сделать с помощью меньшего количества кода, используя flexbox (в зависимости от требуемого уровня поддержки браузера):

#testDiv{
  width: 400px;
  display: flex;
  overflow-x: auto;
}

.testimgdiv{
  width: 120px;
  height: 100px;
  flex: 0 0 auto;
}

Ответ 2

#testDiv {
   border: 1px solid #FF0000;
   float: left;
   height: auto;
   overflow-x: auto;
   width: 400px;
}