Предположим, у меня есть два элемента DIV: внешний контейнер DIV и внутренний DIV внутри контейнера. Я хочу, чтобы внутренний DIV был намного больше внешнего DIV, но внешний DIV имеет свойство overflow:hidden, поэтому большая часть внутреннего DIV не видна.Скрытый внутренний DIV
Целью было бы реализовать функции прокрутки или прокрутки, где вы могли бы перемещать внутренний DIV внутри внешнего DIV.
Базовая реализация может быть что-то вроде:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 500px;
height: 40px;
border: 1px solid #a8a8a8;
padding: 5px;
overflow: hidden;
}
.inner-content {
white-space: no-wrap;
position: relative;
display: inline-block;
}
.inner-element {
display: inline-block;
}
</style>
</head>
<body>
<div class = "container">
<div class = "inner-content">
<div class = "inner-element">Lots of content goes here</div>
<div class = "inner-element">Lots of content goes here</div>
<div class = "inner-element">Lots of content goes here</div>
<div class = "inner-element">Lots of content goes here</div>
<div class = "inner-element">Lots of content goes here</div>
<div class = "inner-element">Lots of content goes here</div>
</div>
</div>
</body>
</html>
Проблема заключается в том, что я хочу, чтобы все элементы во внутренней DIV появляются бок о бок, на одной горизонтальной линии, так что пользователь может прокручиваться влево или вправо.
Таким образом, этого можно достичь, просто используя display: inline-block для всех элементов (или float). Кроме того, проблема заключается в том, чтобы предотвратить обертывание внутренних элементов, мне нужно указать очень большую ширину на .inner-content. (Например, если я указываю width:10000px или что-то в этом роде, то внутренние элементы, конечно же, не обертываются.) Но тогда проблема заключается в том, что пользователь сможет бесконечно прокручивать внутренний DIV вправо.
Итак, как я могу устроить вещи так, чтобы все (частично скрытые) элементы внутри внутреннего DIV оставались на одной и той же горизонтальной линии (без явного указания ширины)?