salut à tous,

tout d'abord je voudrais préciser que j'y connais pas grand chose aux CSS.

J'ai des données dynamiques que j'affiche à l'intérieur de div. La largeur des divs est fixe mais la hauteur varie en fonction du contenu.

J'aimerais obtenir un alignement régulier (en tableau) de mes divs au lieu du patchwork suivant.


Nom : divs.PNG Affichages : 1039 Taille : 42,4 Ko

Voilà mon code pour l'affichage


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
23
24
25
26
27
28
29
30
31
32
33
<Html>
    <tpl for=".">
        <div class="thumb-wrap" id="{ID}">
            <div class="matchTable" style="width:300px;">        
                <div class="matchRow">
                    <div class="matchCell">INDEX</div>
                    <div class="matchCell">{INDEX}</div>
                </div>
                <div class="matchRow">
                    <div class="matchCell">Ligue</div>
                    <div class="matchCell">{[LeagueRenderer(values.LEAGUEID)]}</div>
                </div>
                <div class="matchRow">
                    <div class="matchCell">LOCAUX</div>
                    <div class="matchCell">{[TeamRenderer(values.HOMETEAMID)]}</div>
                </div>
                <div class="matchRow">
                    <div class="matchCell">VISITEURS</div>
                    <div class="matchCell">{[TeamRenderer(values.GUESTTEAMID)]}</div>
                </div>
                <div class="matchRow">
                    <div class="matchCell">DATE</div>
                    <div class="matchCell">{DATE:date('d M Y')} - {TIME:date('G:i')}</div>
                </div>
                <div class="matchRow">
                    <div class="matchCell">PLACE DE JEU</div>
                    <div class="matchCell">{[PlayGroundRenderer(values.PLAYGROUNDID)]}</div>
                </div>                                                             
            </div>
            {[convocationsRenderer(values.CONVOCATION)]}
        </div>
    </tpl>                                                                                          
</Html>

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
.matchTable {
    /*width:300px;*/
    display: table;
}
 
 
.matchRow {    
    width: 100%;
    display: table-row;
}
 
.matchCell {
    padding: 3px;
    margin: 3px;
    border-style: none none solid none;
    border-width: 1px;
    border-color: #C0C0C0;
    display: table-cell;
 
}
 
.matchTableCaption {
    margin-top: 5px;
    display: table-caption;
    text-align: center;
    font-weight: bold;
}
.match-view .x-panel-body {
    background: white;
    font: 11px Arial, Helvetica, sans-serif;
}
 
.match-view .thumb-wrap {
    float:left;
    margin: 4px;
    margin-right: 0;
    padding: 4px;
    border: 1px solid #999999;
}
 
.match-view .thumb-wrap span {  
    display: block;
    overflow: hidden;
    text-align: center;
    width: 86px; // for ie to ensure that the text is centered
}
 
.match-view .x-item-over{
    border: 1px solid #dddddd;
    background: #efefef url(../../Shared/images/row-over.gif) repeat-x left top;
    padding: 4px;
}
 
.match-view .x-item-selected{
    background: #eff5fb url(../../Shared/images/selected.gif) no-repeat right bottom;
    border: 1px solid #99bbe8;
    padding: 4px;
}
Est-ce que c'est possible de faire ça avec du CSS?

je vous remercie d'avance