Я пытаюсь реализовать слайдер для моей галереи. Прямо сейчас, 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;
}
После того, как вы разместили элементы, вы удалили их из потока документов, и они не будут рассчитываться по ширине родительского элемента. Вы должны использовать комбинацию 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;
}
#testDiv {
border: 1px solid #FF0000;
float: left;
height: auto;
overflow-x: auto;
width: 400px;
}