Discussion :

[blinkseb]

Bonjour à tous,

Alors voilà mon problème, j'ai une liste d'image à afficher avec une légende, et j'aimerais qu'une fois le bord droit atteint, la liste reprenne toute seule en dessous.

Code :

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

1
2
3
4
 
<div class="serendipity_imageComment_left" style="width: 230px;">
<div class="serendipity_imageComment_img"><a href="/blog/uploads/live5.JPG"><img width="220" height="165" style="border: 0px none ; padding: 0px 5px 5px; float: left;" src="/blog/uploads/live5.miniature.JPG" alt="" /></a></div><div class="serendipity_imageComment_txt">Nous tous !</div>
</div>

et le style css associé :

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
 
.serendipity_imageComment_center,
.serendipity_imageComment_left,
.serendipity_imageComment_right {
    border: 1px solid #DDDDDD;
    background-color: #EFEFEF;
    margin: 3px;
    padding: 3px;
}
 
.serendipity_imageComment_center {
    margin: auto;
}
 
.serendipity_imageComment_left {
    float: left;
}
 
.serendipity_imageComment_right {
    float: right;
}
 
.serendipity_imageComment_img,
.serendipity_imageComment_img img {
    margin: 0px;
    padding: 0px;
    text-align: center;
}
 
.serendipity_imageComment_txt {
    border-top: 1px solid #DDDDDD;
    margin: 0px;
    padding: 3px;
    clear: both;
    font-size: 8pt;
    text-align: justify;
    text-indent: 0px;
}

Alors ça marche très bien jusqu'à la première ligne. Ensuite, comme les images n'ont pas toutes la même hauteurs, lors du passage à la ligne les images se mette n'importe où ! J'ai mis une pièce jointe pour voir la situation.

Donc sauriez comment faire pour que les images se remette toute seul où il faut ? pour le moment je met un <p style="clear: both;"></p> entre chaque ligne mais je ne l'ai connait pas à l'avance, et c'est pas pratique comme système...

Merci d'avance!
Seb