CSS - Faire des divs aligner horizontalement
J'ai un div conteneur avec un fixe de largeur et de hauteur, avec overflow: hidden.
Je veux une rangée horizontale de float: left divs l'intérieur de ce conteneur. Les Divs qui sont flottaient gauche sera naturellement pousser sur la "ligne" ci-dessous, apres avoir lu la bande droite de leur parent. Ce sera le cas, même si la hauteur de la mère ne devrait pas permettre cela. C'est à quoi cela ressemble:
![Mauvais][1] - retiré de l'image shack image qui avait été remplacé par une annonce
Comment je l'aime à regarder:
![À droite], [2] - retiré de l'image shack image qui avait été remplacé par une annonce
Remarque: l'effet que je veux peut être obtenue en utilisant des éléments inline & white-space: no-wrap (qui est la façon dont je l'ai fait dans l'illustration). Ceci, cependant, n'est pas bon pour moi (pour des raisons trop longues à expliquer ici), que l'enfant divs doivent être flottaient des éléments de niveau bloc.
- Votre image liens semblent avoir cassé. Si vous avez toujours les originaux, s'il vous plaît reupload à pile.imgur. Merci!
Vous devez vous connecter pour publier un commentaire.
Vous pouvez mettre à l'intérieur de la div dans le conteneur qui est assez large pour contenir tous les divs flottants.
CSS:
HTML:
width: 200%;
et les éléments enfants sont chaquewidth: 50%;
. Je peux alors utilisertransform: translateX(n%);
sur le conteneur pour émuler un carrousel effet, tant que j'ai un conteneur parent avecoverflow: hidden;
style="overflow:hidden"
pour les parentsdiv
etstyle="float: left"
pour tous les enfantsdivs
sont importants pour assurer ledivs
aligner horizontalement pour les anciens navigateurs tels que IE7 et ci-dessous.Pour les navigateurs modernes, vous pouvez utiliser
style="display: table-cell"
pour tous les enfantsdivs
et il rendrait à l'horizontale correctement.vous pouvez utiliser le
clip
propriété:note le
position: absolute
etoverflow: hidden
nécessaire afin d'obtenirclip
de travail.Cela semble proche de ce que vous voulez:
CSS:
HTML:
Float: left, display: inline-block à la fois ne parviennent pas à aligner les éléments horizontalement si elles dépassent la largeur du conteneur.
Il est important de noter que le récipient ne doit pas être enroulé si les éléments à afficher à l'horizontale:
white-space: nowrap
Vous pouvez maintenant utiliser les css flexbox pour aligner les divs, horizontalement et verticalement, si vous en avez besoin. formule générale va comme ceci
Flotter à gauche. Dans Chrome, au moins, vous n'avez pas besoin d'avoir un wrapper,
id="container"
, in LucaM l'exemple.