Aligner divs de hauteur différente

Version imprimable

1 pièce(s) jointe(s)

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.

Pièce jointe 135796

Voilà mon code pour l'affichage

Code:

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:

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

30/01/2014, 12h47
Blooster

Bonjour bossum,

As-tu essayé de regarder du côté de min-height et max-height ?

Cela te permettrait donc d'avoir des DIVs qui font à peu près tous la même taille ( sauf dans le cas où il y a plus d'informations à afficher comme ton exemple ci-dessus).

Ensuite pour palier au problème de l'alignement Il faut que tu mettes absolument un max-width qui te permettra donc d'avoir une largeur de DIV identique à chaque fois.

Ensuite pour ce qu'il s’agît de l'alignement verticale, malheureusement ( ou du moins à ma connaissance ) tu ne peux pas les aligner ( partis du principe que des DIVs n'auront jamais la même hauteur à chaque fois.

Ce que tu peux néanmoins faire, c'est connaître la hauteur maximale que ta DIV peut avoir et fixer ton max-height à la hauteur maximale que tu auras défini.

Cela te permettra d'avoir un alignement verticale et horizontale parfait, mais cependant tu auras tout de même des DIVs avec plus ou moins de chose à l'intérieur cela risque de faire drôle.

A toi de voir :)
31/01/2014, 20h06
Candygirl

Hello,

As-tu testé un display:inline-block associé à un vertical-align:top au lieu du float:left ?

Candygirl merci pour ton aide, tu m'as mis sur la bonne piste. j'ai tâtonné un peu et j'ai trouvé la solution :
Code:

1 2 3 4 5 6 7 8 .match-view .thumb-wrap { display:inline-block; vertical-align:top; margin: 4px; margin-right: 0; padding: 4px; border: 1px solid #999999; }