Discussion :

[Stephane_br]

Bonjour,

J'ai un souci avec des div au contenu dynamique.

Difficile à expliquer, je vous met une image pour vous montrer :



En gros j'ai 4 divs de 25% (en float left) par ligne qui au delà de 4 repassent à la ligne mais au lieu de se "coller" en dessous de la première, elles passent en dessous d'une ligne "virtuelle", ce qui est normal bien entendu telle que je l'ai programmé pour le moment.
Mais comment faire pour que les div se "collent" comme dans l'exemple sur ma photo ?

Merci pour vos pistes... css ou javascript je ne sais pas trop...

Merci.

[Invité]

Bonjour,

• voir : Masonry

[Stephane_br]

Merci pour le lien.
Je regarde ça.
En css pur, ce n'est pas faisable ?

[Stephane_br]

C'est parfait en effet, mais malheureusement, je ne peux pas l'utiliser car mes blocs sont dans un menu qui est caché (display:none) à l'affichage de la page. La div qui les contient ne s'affiche que survol de la souris sur un div supérieur (le titre).

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="menu">
...
...
 
  <div class="Menu-item">
    <a href="...">titre</a>
    <div class="grid" style="display:none">
       <div class="grid-item">...</div>
       <div class="grid-item">...</div>
       <div class="grid-item">...</div>
       <div class="grid-item">...</div>
       ...
    </div>
  </div>
 
...
...
</div>

mais du coup, le JS Masonry ne voit pas la taille du bloc "grid" et me met les items en top:0;left:0... , bref, si la div n'est pas visible, il peut pas calculer les hauteurs etc... ce qui est normal à priori....

C'est pourquoi je me demandais si c'était pas faisable en css..... je continue à chercher.
Merci en tout cas pour votre lien

[NoSmoking]

Bonjour,
si tu peux modifier ta structure HTML tu peux t'en sortir en mettant des éléments en flex-direction:column dans un élément conteneur en flex-direction:row.

Quelque chose comme, les classes couleur sont là pour te montrer l'ordre, en colonne donc :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="flex-container">
  <div class="flex-column">
    <div class="orange"></div>
    <div class="bleu"></div>
    <div class="vert"></div>
  </div>
  <div class="flex-column">
    <div class="orange"></div>
    <div class="bleu"></div>
    <div class="vert"></div>
  </div>
  <div class="flex-column">
    <div class="orange"></div>
    <div class="bleu"></div>
    <div class="vert"></div>
  </div>
  <div class="flex-column">
    <div class="orange"></div>
    <div class="bleu"></div>
    <div class="vert"></div>
  </div>
</div>

et un CSS du type de :

Code :

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

1
2
3
4
5
6
7
8
9
10
.flex-container {
  display: flex;
  width: 40em;
  margin: auto;
}
.flex-container .flex-column {
  display: flex;
  flex: 0 1 25%;
  flex-direction: column;
}

[Stephane_br]

Bonjour et merci beaucoup pour votre aide.
Je regarde ça et fait quelques tests..
Merci beaucoup

[awax31]

D'accord avec NoSmoking
C'est faisable assez facilement avec les flex-box