Comment faire flotter des éléments dans un div plus petit que ses éléments flottants?

Question

Je veux construire mon propre carrousel à des fins d'apprentissage. Mais je suis curieux de savoir comment le faire correctement. J'ai essayé de mettre des divs comme des éléments de carrousel l'un à côté de l'autre avec le flotteur: à gauche. Chaque div a une largeur et une hauteur fixes. Après cela, j'ai mis un div autour des éléments du carrousel, appelé "écrêtage". La div d'écrêtage a la même taille que les éléments qui doivent être déplacés à la fois (si vous déplacez 3 éléments en cliquant sur "suivant", la largeur de div d'écrêtage est égale à la largeur de ces 3 éléments). J'ai vu cela dans quelques exemples. En outre, ce div de découpage est surchargé: masqué pour masquer les éléments de carrousel suivants et précédents.

Le problème est que les éléments, qui devraient être cachés à travers le div de découpage, sont mis sur une nouvelle ligne qui rend le tout inutilisable.

Comment puis-je contourner ce problème?

Si la question n'est pas assez claire, dites-moi, je vais essayer de le réécrire.

Answer 1

Vous pouvez faire quelque chose comme ceci:

<div id="a"> 
    <div id="b"> 
    <div id="1"></div> 
    <div id="2"></div> 
    <div id="3"></div> 
    </div> 
</div> 

"a" a une largeur fixe. C'est comme l'emballage de tout, avec un débordement réglé à caché et ainsi de suite.

«b» a une largeur fixe d'un lot. C'est l'enveloppe des divs de contenu (1,2,3) afin qu'ils ne soient pas poussés à la ligne suivante.

1, 2, 3 juste flotter à gauche comme vous le faisiez.

Answer 2

Les effets de "carrousel de défilement horizontal" sont généralement effectués en ayant un objet large de largeur fixe à l'intérieur d'un conteneur étroit de largeur fixe avec overflow:hidden. Vous pouvez essayer d'ajouter un conteneur large de largeur fixe autour de vos boîtes flottantes, afin qu'elles soient disposées indépendamment du conteneur étroit.