Alignement balise en display: inline-block

**narchymaster** · 12/11/2017, 21h52

Bonsoir,

Mon problème c'est que si j'utilise 3 textes différents, les blocs se comportent font un effet escalier ( ci joint photo ) alors que si j'utilise 3 textes identiques les blocs s'alignent parfaitement.

Voici 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
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
<!DOCTYPE html>
	<html>
		<head>
 
			<title>Mon CV</title>
			<meta charset="utf-8">
			<link rel="stylesheet" type="text/css" href="style.css">
 
		</head>
<body>
	<header>
 
		<div id="photo">
			<a href="images/profil.jpg"><img src="images/profil_mini.jpg" class="imageflottante" alt="ma photo" title="Clique ici" /></a>
				<h1>Thomas Bourdin</h1>
					<p>Comme le dit souvent ma copine cocaïnomane : tire un trait, tu y verras plus clair.</p>
						</div>
 
	</header>
 
<section>
 
<div class="conteneur">
 
	<div id="liseret">
		</div>
 
<article>
 
		<h3 class="exp">Experiences professionnelles</h3>
 
<ul>
	<li>Mise en œuvre des instructions fournies par des consultants pour assurer les soins appropries aux patients.</li><br />
	<li>Collaboration avec les consultations du personnel afin d’identifier et de repondre a diverses questions.</li><br />
	<li>Remplir et modifier les ordonnances des patients selon les directives.</li>
</ul>
</article>
 
<article>
 
			<h3 class="qua">Qualifications et competences</h3>
 
<ul>
	<li>Bonne experience des soins aux patients en general et des conditions medicales courantes.</li><br />
	<li>Bonne connaissance des politiques et des procedures sur la facon de traiter les plaintes des patients.</li><br />
	<li>Aptitude a remplir les ordonnances des patients.</li>
</ul>
</article>
 
<article>
 
<h3 class="for">Formation et diplome</h3>
 
<ul>
	<li>Universite Paris VIII : Diplome de medecine avec une option en pharmacologie obtenu en 2008.</li>
</ul>
 
</article>
 
 
			</div>
		</section>
	</body>
</html>

mon css :

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
p, h1
{
	text-align: center;
}
 
h3
{
	color: maroon;
	border-bottom: 2px black solid;
}
 
body
{
	background-image: url("images/fondeffet.jpg");
}
 
 
.imageflottante
{
	box-shadow: 6px 6px 0px silver;
}
 
#photo a
{
    width: 190px;
   float: right;
}
 
article
{	
	border: 2px black solid;
	display: inline-block;
	width: 250px;
 
}
 
.conteneur
{
	border: 2px black solid;
}

Et voilà ce que ça donne en image :

Nom : 1.jpg
Affichages : 1269
Taille : 152,4 Ko

Et si j'agrandis la largeur de la balise article :

Nom : 2.jpg
Affichages : 1298
Taille : 137,2 Ko

Avec position relative je pourrais faire en sorte de le changer de place ou alors lui mettre <div class> mais j'en suis sur que je merde quelques part ^^

Mais je ne comprends toujours pas pourquoi quand je réduis/augmente la balise article, elle fait cette effet escalier..

Merci

Bonne soirée,

**mathieu** · 12/11/2017, 23h19

Vous avez oublié d'indiquer le résultat que vous souhaitez obtenir.

Essayez déjà d'ajouter cette règle, cela rendra les blocs un peu plus homogènes

Code :

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

1
2
3
4
.conteneur
{
    display : flex;
}

Je précise que je suis débutant en CSS et que je me limite à quelques bricolages visuels donc n'hésitez pas à oublier ma réponse si quelqu'un arrive avec des meilleurs conseils de construction du code CSS.

Invité · 13/11/2017, 05h03

Bonjour,

Une solution :

1- supprime

Code :

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

<div id="liseret"></div>

Ou mets-le avant <div class="conteneur">

2- CSS

Code :

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

1
2
3
4
5
6
7
8
9
.conteneur {
 display:table; /* se comporte comme une table */
 width:100%;
}
.conteneur > article {
 display:table-cell; /* se comporte comme une cellule de table */
 width:33.33%;
vertical-align:top;
}

3- et pour répondre à ta question :
Les éléments en inline-block ont un double comportement :

ils s'alignent par le bas (comme les éléments inline),
tout en formant un "bloc" (comme les éléments block)

Si tu avais remplacé par float:left, ils se seraient alignés par le haut...
Mais seraient "sortis du flux".
Ceci est une autre histoire....

**narchymaster** · 13/11/2017, 16h00

Salut,

J'ai trouvé grâce à votre aide ^^

Voici mon CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
article
{	
 
	display: inline-block;
	vertical-align: top;
	width: 350px;
	padding-left: 2em;
}
 
.conteneur
{
	display: flex;
 
}

J'ai rajouté un display: flex; au parent et un vertical-align: top; et la magie fait son effet

Merci à tous les deux

Alignement balise en display: inline-block

Positionnement en CSS

Discussions similaires

Partager

Partager