Bonjour,

Je suis débutant en HTML et CSS donc il y a surement beaucoup d'erreur dans mon fichier.

Je souhaiterais que mes <span> soit de la même hauteur quel que soit le contenu.

Voici une capture de ma page :

Nom : 2018-10-08_11h09_29.png Affichages : 550 Taille : 101,8 Ko

Voici mon code :

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<body>
		<style>
                        
                        div
                        {
                                margin: 5px;
                        }
                        .container
                        {
                                width: 800px;
                                margin: auto;
                        }
                
                        .title
                        {
                                background-color: gray;
                                color: orange;
                                text-align: center;
                                font-size: larger;
                                min-height: 10px;
                        }
                        
                        .information
                        {
                                background-color: orange;
                                color: white;
                                text-align: center;
                                font-size: large;
                                min-height: 10px;
                        }
                        
                        .texte
                        {
                                background-color: #F4F4F4;
                                color: grey;
                                min-height: 10px;
                        }
                        
                        .risques
                        {
                                flex-direction: row;
                                justify-content: space-around;
                                display: flex;
                        }
                        
                        .block
                        {
                                display: inline-block;
                                width: 30%;
                                text-align: center;
                                min-height: 20px;
                                height: 100%;
                        }
                        
                        .right
                        {
                                
                        }
                        
                        .center
                        {
                                margin-left: calc(5% - 5px);
                                margin-right: calc(5% - 5px);                           
                        }
                </style>
		<div class="container">
			<div class="title">
				La **** vous informe			
			</div>
			<div class="information">
				Risques exceptionnels ne riment pas forcément avec Tarifs exceptionnels
			</div>
			<div class="texte">
				Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit.
				Ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.
			</div>
			<div class="risques">
				<span class="block">
					<div>
						Risque A
					</div>
					<div class="texte">
						Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit.
						Ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.
					</div>
				</span>
				<span class="block center">
					<div>
						Risque B
					</div>
					<div class="texte">
						Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit.
						Ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et 
					</div>
				</span>
				<span class="block right">
					<div>
						Risque C
					</div>
					<div class="texte">
						Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit.
						Ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.
					</div>
				</span>
			</div>
		</div>
	</body>