Comment faire flotter les éléments avec des hauteurs différentes?
Je suis en train de travailler sur un responsive webdesign qui flotte en plusieurs éléments en 4 colonnes côte à côte. Ces éléments ont des hauteurs différentes et donc flottant de ne pas fonctionner correctement.
C'est ce qui se passe en ce moment:
Des idées sur la façon de rendre les éléments flottent comme ça:
Je suppose que cela doit fonctionner avec jQuery "la franc-maçonnerie", à droite? Cependant, je suis en train de travailler avec Zepto.js et je suppose un plugin jQuery ne fonctionne pas.
Est-il un pur CSS (CSS3) pour qui? Une astuce ou cela?
Si cela ne fonctionne pas avec de la pure CSS ou avec le JS est-il possible de faire ceci:
Maintenant la deuxième rangée avec des éléments 5, 6 et 7 n'est pas "vraiment" flottement de la façon que vous attendez, mais il est caché saut de ligne (clearfix) à l'intérieur.
Est-il un moyen pour que pure CSS? E. g. utilisation nth-child(4n+4)
et un pseudo-sélecteur comme :after
pour appliquer un saut de ligne avec content
?
Toutes les idées sur qui? Tout trucs astucieux pour faire ce travail?
- Pour la deuxième sans clearfixing, il suffit de mettre 1,2,3,4 dans un récipient, et 5,6,7,8 dans un récipient
- certains plugins jquery travailler avec Zepto. Je ne peux pas parler pour la Maçonnerie, mais vous pouvez l'essayer avant de le rejeter.
- Certains JS alternatives à la maçonnerie ont émergé en ce moment: github.com/attila/savvior et github.com/rnmp/salvattore
Vous devez vous connecter pour publier un commentaire.
vous pouvez simplement appliquer un clair de chaque cinquième élément pour le forcer à démarrer tout le chemin à gauche. Je pense qu'il serait quelque chose comme ceci en css3:
jsFiddle démo
clear: both
, mais n'avait aucune idée vous pouvez spécifier une répétition de la formule de l'indice de sélection de lanth-child
en CSS3. J'espère que vous n'avez pas l'esprit @PeterVR mais j'ai ajouté une petite démo jsFiddle.(4n+1)
partie à l'intérieur d'un media-query ainsi...Comme mentionné par @Arieljuod vous pouvez utiliser
display: inline-block
au lieu defloat
. La beauté de ceci est que cela fonctionne dans tous les navigateurs (y compris IE7+, avec le hack ci-dessous) et est complètement fluide:exemple: http://jsfiddle.net/cRKpD/1/
Je sais je suis en retard à la fête, mais quelqu'un venez de lier cette question à un autre semblable, et j'ai réalisé qu'il manque la flexbox solution...
(ce qui n'était pas là quand la question a été posée).
Ajouter des fournisseur de préfixes et de supprimer les inutiles dans votre CSS
exemple
pour la deuxième option, au lieu de "float: left" utiliser "display: inline-block", vous pouvez même combiner cela avec un text-align: center pour toujours de remplissage de 100%, sauf la dernière ligne
pour la première option, vous pouvez mettre 1 et 5 dans onw conteneur, 2 et 6 de l'autre, et donc un, alors vous float ces conteneurs
pour le dernier, vous pouvez entourer chaque groupe de quatre avec un conteneur. Ensuite flotter les divs à l'intérieur des conteneurs, si vous ne voulez pas ou ne pouvez pas faire cela manuellement, vous pourriez probablement faire cela facilement avec JavaScript.
Première option
CSS multi-colonnes de mise en page, une fois qu'il est suffisamment standardisés et pris en charge, peut offrir une souplesse façon de le faire.
Le seul CSS autre solution qui vient à l'esprit, si elle ne peut pas être une réponse appropriée aux, est de regrouper les éléments dans la colonne de conteneurs (1 et 5, 2 et 6, 3 et 7, 4).
En dehors de ces deux options, je crois que le JS est nécessaire.
Un peu en retard, mais mettre 1 dans un diviseur supplémentaire. Ensuite, mettre 7 dans ce diviseur (vous aurez à régler le diviseur de sorte que 7 s'affiche en dessous de 1). Pourrait être utile d'utiliser overflow:visible dans cette cloison.