Aligner divs de hauteur différente

**bossun** · 29/01/2014, 22h46

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 : 1021
Taille : 42,4 Ko

Nom : divs.PNG
Affichages : 1021
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

**Blooster** · 30/01/2014, 12h47

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

**Candygirl** · 31/01/2014, 20h06

Hello,

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

**bossun** · 02/02/2014, 23h53

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 :

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

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;
}

Aligner divs de hauteur différente

Positionnement en CSS

Discussions similaires

Partager

Partager