Supposons que je dispose de deux DIV éléments : un conteneur DIV extérieur et un DIV intérieur à l'intérieur du conteneur. Je veux que le DIV interne soit beaucoup plus grand que le DIV externe, mais le DIV externe a une valeur de overflow:hidden de sorte que la majeure partie du DIV intérieur n'est pas visible.
L'objectif est de mettre en œuvre une fonctionnalité de défilement ou de balayage permettant de déplacer le DIV interne à l'intérieur du DIV externe.
Une mise en œuvre de base pourrait être quelque chose comme :
<!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>Le problème est que je veux que tous les éléments du DIV interne apparaissent côte à côte, sur la même ligne horizontale, afin que l'utilisateur puisse faire défiler l'écran vers la gauche ou vers la droite.
Pour ce faire, il suffit d'utiliser display: inline-block sur tous les éléments (ou float ). Sauf que le problème est que pour éviter que les éléments intérieurs ne s'enroulent, je dois spécifier une très grande largeur sur les éléments suivants .inner-content . (Par exemple, si je spécifie width:10000px ou quelque chose comme ça, alors les éléments intérieurs ne sont pas enveloppés.) Mais le problème est alors que l'utilisateur pourrait faire défiler sans fin le DIV intérieur vers la droite.
Comment puis-je donc faire en sorte que tous les éléments (partiellement cachés) du DIV intérieur restent sur la même ligne horizontale (sans spécifier explicitement une largeur) ?
