web-dev-qa-db-fra.com

Comment faire flotter des éléments de différentes hauteurs?

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?

javascriptjquerycsscss3css-float
26
matt

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;
}

jsFiddle demo

31
Pevara

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/

21
My Head Hurts

, З з ю ю ю ю ю л л.
(которого не было, когда задавался вопрос).

Добавьте нужные префиксы поставщиков 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;
}

example

1
Andrei Gheorghiu

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

0
arieljuod

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.

0
BK14

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.

0
Jack

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.

0
Matt Coughlin