Discussion :

[ZeMike]

Bonjour,
dans un contexte Bootstrap, j'ai une série de divs de largeur constante span6 à l'intérieur d'un span12, mais dont la hauteur peut varier. Les divs sont bien organisées sur 2 colonnes, mais " de temps en temps" bootstrap en met deux en vis à vis gauche-droite, ce qui fait que j'ai des espaces très grands parfois entre 2 divs dans la même colonne.
J'ai essayé beaucoup de choses mais je n'aboutis pas. Ce que j'ai obtenu de plus intéressant comme résultat c'est d'utiliser le "column-count: 2;" sur mon span12, le problème alors c'est que la dernière div de la colonne de gauche est coupée pour se terminer dans la colonne de droite.
Quelqu'un a-t-il une solution ? La page concernée est celle-ci: http://site.ecostrategie.com/?-Qui-sommes-nous-

Merci !
Mikhaël

[NoSmoking]

Bonjour,
je n'ai pas réussi à visualiser, en allant sur la page en lien, où se trouvait ton soucis !?!

[Invité]

Bonjour,

1/ il est possible aussi qu'un "simple" display:flex; avec flex-direction:column; et flex-wrap:wrap; pourrait suffire ici.
[edit] Après test, il faut définir/fixer la hauteur du conteneur (ce qui n'est pas jouable...)

2/ Concernant column-count:2; ça peut fonctionner en mettant sur les div enfants break-inside :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.span6 {
  width:98%;
  float:none !important;
  box-sizing:border-box;
  margin:0 1% 30px 1%;
  break-inside:avoid; page-break-inside:avoid; -webkit-column-break-inside: avoid;
}

+ supprimer les class "placeLeft" et "placeRight" (et supprimer la class "row" sur le parent, qui ne sert à rien)

Néanmoins, la compatibilité laisse encore à désirer...


3/ Pour aller plus loin :

• isotope (bootstrap)
• masonry (bootstrap)
• Packery