Bonjour,

J'ai une gestion de documents qui les hierarchise. J'essaye de les afficher en colonne de maniere dynamique.
Mais avant d'effectuer cela, il faut que le css corresponde.

Je m'explique:
J'ai une div principale composée de la div parent remplie et d'une div enfant remplie. La div enfant est elle meme composée d'une div parent et d'une autre div enfant, ect ....

J'essaye d'aligner toutes les div parent sur la meme ligne, tout en acceptant l' overflow (pour avoir qque chose de dynamique par la suite et avoir une scrollbar s'il y a trop de colonnes)

# display.html.erb
Code : 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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<div id="finder-trunk">
<div id="finderparent">
  <ul id="finder-header">
    <li><a>parents 1</a></li>
  </ul>
  <ul id="finder">
  <% @process_numbers.each do |pn| %>
    <li>
      <a><%= pn.id %>-<%=  pn.number%></a>
    </li>
  <% end %>
  </ul>
 
</div>
 
<div id="children-<%= @node %>" class="close">
 
<div id="finder-children">
<ul id="finder-header">
  <li>
    <a>branch 1</a>
  </li>
</ul>
 
<ul id="finder" class="documents">
  <% @children.each do |c| %>
    <li>
      <a><%=  c.document_name %></a>
    </li>
  <% end %>
 </ul>
</div>
<div id="children-<%= @node %>" class="open">
<div id="finder-children">
<ul id="finder-header">
  <li>
    <a>branch 2</a>
  </li>
</ul>
 
<ul id="finder" class="documents">
  <% @children.each do |c| %>
    <li>
      <a><%=  c.document_name %></a>
    </li>
  <% end %>
 </ul>
</div>
 
<div id="children-<%= @node %>" class="open">
<div id="finder-children">
<ul id="finder-header">
  <li>
    <a>branch 3</a>
  </li>
</ul>
 
<ul id="finder" class="documents">
  <% @children.each do |c| %>
    <li>
      <a><%=  c.document_name %></a>
    </li>
  <% end %>
 </ul>
</div>
<div id="children-<%= @node %>" class="close"><br/></div>
 
</div>
 
</div>
 
</div>
 
 
</div>
Voici le code css qui marche pour la premiere branche, mais pas pour le reste:

# CSS
Code : 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
23
24
25
26
27
28
29
 
 div#finder-trunk {
    overflow: auto;
    height: 450px;
}
 
 
 
 div#finder-trunk div#finderparent {
    width: 400px;
    height: 450px;
    display: inline;
    float: left;
}
 
 div#finder-trunk div.open {
    width: auto;
    height: 451px;
    display: inline;
    float: left;
}
 
div#finder-trunk div#finder-children {
    width: 400px;
    height: 450px;
    display: inline;
    float: left;
 
}

Comme dit precedemment, les autres div ne s'alignent pas et vont a la ligne.
Elles sont sencées toutes avoir la meme hauteur, et la meme largeur(sauf les div.open car leur largeur est dynamique). C'est un peu plus compliqué qu'avec de simples div. Auriez vous une idée ?