Comment faire flotter des éléments de différentes hauteurs?
Je travaille sur un webdesign réactif qui flotte plusieurs éléments dans 4 colonnes côte à côte. Ces éléments ont des hauteurs différentes et donc flottant ne fonctionne pas correctement.
C'est ce qui se passe en ce moment:
Flottant mal http://f.cl.ly/items/05233z0M0H0x1t1K331B/floating-wrong.png
Des idées sur la façon de faire flotter les éléments comme ça:
Flottant à droite http://f.cl.ly/items/300e1s0o0p1r1P3k2U3z/floating-right.png
Je devinez que cela devrait fonctionner avec jQuery "maçonnerie", non? Cependant, je travaille avec Zepto.js et je suppose qu'un plugin jQuery ne fonctionnerait pas.
Y a-t-il un moyen pur de CSS (CSS3) à cela? Une astuce ou cela?
Si cela ne fonctionne pas avec CSS pur ou avec JS est-il possible de faire ceci:
Flottant différent http://f.cl.ly/items/0p3O1k0d332c242c0G0F/floating-different.png
Maintenant, la deuxième ligne avec les éléments 5, 6 et 7 n'est pas "vraiment" flottant comme vous le souhaitez mais il y a un saut de ligne caché (clearfix) à l'intérieur.
Y a-t-il un moyen de le faire avec du CSS pur? E. g. utiliser nth-child(4n+4) et un pseudo-sélecteur comme :after pour appliquer un saut de ligne avec content?
Des idées à ce sujet? Des astuces astucieuses pour que ça marche?
7 réponses
Vous pouvez simplement appliquer un clair de chaque cinquième élément pour le forcer à démarrer tout le chemin à gauche. Je pense que cela ressemblerait à ceci dans css3:
div#wrapper > *:nth-child(4n+1) {
clear: both;
}
Comme mentionné par @ Arieljuod, vous pouvez utiliser display: inline-block au lieu de float. La beauté de ceci est qu'il fonctionnera dans tous les navigateurs (y compris IE7+ avec le hack ci-dessous) et est complètement fluide:
div {
...
display: inline-block;
vertical-align: top;
margin-bottom: 0.3em;
*display: inline;
*margin-right: 0.3em;
*zoom: 1;
...
}
exemple de travail: http://jsfiddle.net/cRKpD/1/
Je sais que je suis en retard à la fête mais quelqu'un a juste lié cette question à une autre similaire et j'ai réalisé que celle-ci manquait la solution flexbox...
(ce qui n'était pas là quand la question a été posée).
Ajoutez les préfixes de fournisseur souhaités et supprimez inutile dans votre CSS
.parent {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
Pour la deuxième option, instad de "float: left "utilise" display: inline-block", vous pouvez même combiner cela avec un text-align: center pour toujours remplir 100% sauf la dernière ligne
Pour la première option, vous pouvez mettre 1 et 5 dans le conteneur onw, 2 et 6 sur un autre, et ainsi de suite, puis vous flottez ces conteneurs
Pour le dernier, vous pouvez entourer chaque groupe de quatre avec un conteneur. Ensuite, flottez les divs à l'intérieur des conteneurs, si vous ne voulez pas ou ne pouvez pas le faire manuellement, vous pourriez probablement le faire facilement avec JavaScript.
Première option
La disposition multicolonne CSS , Une fois qu'elle est correctement standardisée et prise en charge, peut offrir un moyen flexible de le faire.
La seule autre solution CSS qui vient à l'esprit, bien qu'elle ne soit pas suffisamment réactive, est de regrouper les éléments dans des conteneurs de colonnes (1 et 5, puis 2 et 6, puis 3 et 7, puis 4).
Mis à part ces deux options, je crois que JS est requis.
Un peu en retard mais mettez 1 dans un diviseur supplémentaire. Ensuite, mettez 7 dans ce diviseur (vous devrez ajuster le diviseur de sorte que 7 apparaisse en dessous de 1). Peut être utile d'utiliser overflow: visible dans ce diviseur.