Je travaille sur une conception Web réactive qui fait flotter plusieurs éléments dans 4 colonnes côte à côte. Ces articles ont des hauteurs différentes et par conséquent, le flottement ne fonctionne pas correctement.
C'est ce qui se passe en ce moment:
flottant incorrect http://f.cl.ly/items/05233z0M0H0x0t1K331B/floating-wrong.png
Toutes les 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 suppose que cela devrait fonctionner avec "maçonnerie" jQuery, non? Cependant, je travaille avec Zepto.js et je suppose qu'un plugin jQuery ne fonctionnerait pas.
Existe-t-il un moyen purement CSS (CSS3)? Un truc ou alors?
Si cela ne fonctionne pas avec du CSS pur ou avec JS, est-il possible de le faire:
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 ne flotte pas "vraiment" comme vous le souhaitez mais il y a un saut de ligne caché (clearfix) à l'intérieur.
Y a-t-il moyen de faire cela avec du CSS pur? Par exemple. utilisez nth-child(4n+4)
et un pseudo-sélecteur du type :after
pour appliquer un saut de ligne avec content
?
Des idées à ce sujet? Des astuces astucieuses pour que cela fonctionne?
vous pouvez simplement appliquer un dégagement à chaque cinquième élément pour le forcer à partir de la gauche. Je pense que cela ressemblerait à quelque chose comme ça en 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 qu'il 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/
, З з ю ю ю ю ю л л.
(которого не было, когда задавался вопрос).
Добавьте нужные префиксы поставщиков et les noms de familles 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" utiliser "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 un conteneur, 2 et 6 sur un autre, et ainsi de suite, puis vous faites flotter ces conteneurs
Un peu tard mais mettez 1 dans un séparateur supplémentaire. Puis mettez 7 dans ce séparateur (vous devrez ajuster le séparateur pour que 7 apparaisse en dessous de 1). Peut-être utile d'utiliser overflow: visible dans ce diviseur.
pour le dernier, vous pouvez entourer chaque groupe de quatre d'un conteneur. Puis, placez les div à l'intérieur des conteneurs. Si vous ne voulez pas ou ne pouvez pas le faire manuellement, vous pouvez probablement le faire facilement avec JavaScript.
Première option
La disposition multi-colonnes CSS , une fois que cela est correctement normalisé et pris en charge, peut offrir un moyen flexible de le faire.
La seule autre solution CSS qui vienne à l’esprit, même si elle n’est pas suffisamment réactive, consiste à regrouper les éléments dans des conteneurs de colonnes (1 et 5, puis 2 et 6, puis 3 et 7 et 4).
Outre ces deux options, je pense que JS est nécessaire.