Bonjour,
je me retrouve avec un problème bizarre, j'ai plusieurs <div> que je veut aligner 2 par 2. Je les ai mis en inline-block avec une largeur de 45% et aucun problème. Mais dés que je met du texte dans l'un d'eux l'alignement est rompus.

sans text avec text
Nom : Capture2.PNG Affichages : 83 Taille : 1,1 Ko Nom : Capture.PNG Affichages : 75 Taille : 1,4 Ko

mon html:
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
<!DOCTYPE html>
<html> 
	<head>
		<link rel="stylesheet" href="test.css" />
    </head>
    <body>
		<section>
			<div id="conteneurgeneral">
				<div class="conteneur" class="color2">
					<p><a href="#">1</a></p>
				</div>
				<div class="conteneur" class="color1">
					<p><a href="#"></a></p>
				</div>
				<div class="conteneur">
					<p><a href="#"></a></p>
				</div>
				<div class="conteneur" class="color2">
					<p><a href="#"></a></p>
				</div>
					<div class="conteneur" class="color1">
				<p><a href="#"></a></p>
				</div>
				<div class="conteneur">
					<p><a href="#"></a></p>
				</div>
			</div>
		</section>
    </body>
</html>

mon css:
Code css : 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
html, body, section{
  height: 100%;
}
 
#conteneurgeneral{
text-align: center;
	width: 100%;
}
 
.conteneur{
	display: inline-block;
	width: 45%;
	min-width: 300px;
	height: 90px;
 
	margin-right: 4%;
	margin-bottom: 4%;
 
	background-color: red;
}

est ce que quelqu’un sait d'où vient le problème svp?