Discussion :

[verbose]

Bonjour,

J'ai un comportement que je trouve bizarre. Le positionnement relatif de ma div change selon que la div contient du texte ou un input :

Code :

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

1
2
3
4
5
6
.inline {
	display: inline-block;
}
.border {
	border: solid;
}

Code html :

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

1
2
3
4
<div id="container">
	<div class="inline border">div contenant du text</div>
	<div class="inline border"><input type="text" size="50"/></div>
</div>

Je constate, grâce aux bordures, que mes deux div ne sont pas alignées. Lorsque je change le contenu de ma deuxième div pour mettre du texte, les deux sont bien alignées.
Donc à l'évidence, et je trouve cela bizarre, le contenu de la div modifie le positionnement de celle-ci.

Comment faire pour que mes deux div soient bien alignées ?

Merci pour votre aide.

[Bovino]

Faudrait que tu précises ta question car dans les bouts de code que tu montres, je ne vois aucune notion possible d'alignement. Si les div sont en inline-block, alors elles s'enchainent à la suite, donc ce serait aligné par rapport à quoi ?

http://jsfiddle.net/4zfp20kk/

[Invité]

Bonjour,
si l'"alignement" concerne les cadres noirs, un line-height fera l'affaire :

Code :

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

1
2
3
4
.inline {
	display: inline-block;
  line-height:2em;
}

Pour info, les div adaptent leur hauteur au contenu.
Le texte et l'input n'ont pas forcément la même hauteur par défaut.
Double la taille du texte pour voir ce que ça donne...

[verbose]

J'avais oublié de préciser que j'avais essayé d'appliquer une propriété height à mes div.
Et effectivement, en utilisant plutôt line-height, j'obtiens ce que je veux.

Merci les gars