Bonjour.

Je souhaite faire un défilement de cartes avec une pile à gauche, une carte centrale et une pile à droite.

J'arrive à mettre en page les piles avec des float ou en utilisant des positions absolues.

Le problème des positions absolues est que le flot doit être décalé verticalement. Donc je dois connaître la hauteur des "cartes" (plus leur décalage vertical éventuel).

Donc je me rabat sur la solution à base de float pour bien intégrer les piles de cartes au flot.

Le problème est que l'attribut overflow hidden me cache les piles. Donc pour l'instant je suis obligé de spécifier une hauteur pour décaler le flot.

Ma question est donc : est-ce possible de décaler le flot verticalement sans spécifier de hauteur explicite.

Voici un code minimaliste qui reproduit ma situation :
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
77
78
79
80
81
82
83
84
<html>
 
<style>
 
p
{
  border   : 1px solid #000000;
}
 
ul
{
  display  : block;
  border   : 1px solid #FF0000;
/*overflow : hidden;*/
}
 
li
{
  display  : block;
 
  width    : 16%;
 
  float    : left; 
  position : relative;
 
  text-align : center;
}
 
li.slider_left
{
    border   : 1px solid #00FF00;
    /* use float */
    left             : 5%;
    top              : 0px;
    /* comment if use absolute */
    margin-right     : -100%;
    margin-bottom    : -100%;
}
 
li.slider_center 
{
    border   : 1px solid #F0F0F0;
    /* use float */
    left             : 10%;
    top              : 10px;
    /* comment if use absolute */
    margin-right     : -100%;
    margin-bottom    : -100%;
}
 
li.slider_right
{
    border   : 1px solid #0000FF;
    /* use float */
    left             : 15%;
    top              : 5px;
    /* comment if use absolute */
    margin-right     : -100%;
    margin-bottom    : -100%;
}
 
</style>
 
<body>
 
<p>Before.</p>
 
<ul >
 
<li class="slider_left">One</li>
<li class="slider_left">Two</li>
 
<li class="slider_center">Three</li>
 
<li class="slider_right">Four</li>
<li class="slider_right">Five</li>
 
</ul>
 
<p>After.</p>
 
</body>
 
</html>
Merci pour votre aide.