Pourquoi est-ce que inline-block élément de contenu qui n'est pas aligné verticalement
Suis tombé sur un drôle de question CSS. Quelqu'un peut m'expliquer pourquoi la boîte ayant contenu n'est pas aligné verticalement?
Si vous mettez du texte à l'intérieur de la durée de la classe .divPutTextToFixIssue
- il s'aligne correctement.
CSS:
#divBottomHeader {
background-color: #d5dbe0;
height: 43px;
}
.divAccountPicker {
display: inline-block;
background: blue;
width: 200px;
height: 40px;
}
.divAccountData {
display: inline-block;
background: red;
width: 400px;
height: 40px;
}
HTML:
<div id="divBottomHeader">
<div class="divAccountPicker">
<span class="divPutTextToFixIssue"></span>
</div>
<div class="divAccountData">
<span>Balance: $555</span>
</div>
</div>
Vous devez vous connecter pour publier un commentaire.
La valeur par défaut
vertical-align
valeur estbaseline
quiRemarque: Vous pouvez le voir, cette valeur par défaut dans l'action par l'ajout de
vertical-align:baseline
à votre.divAccountData
sélecteur. Depuisbaseline
est par défaut l'alignement est inchangé.Vous avez besoin de la modifier pour
top
pour aligner les blocs en haut, par exemple:Référence est défini comme
À l'adresse pourquoi ajout de texte semble résoudre le problème, c'est parce que
de CSS2 détails du modèle de formatage Visuel
L'ajout d'un seul personnage les changements de la ligne de base, provoquant le second bloc à apparaître dans le même alignement vertical. Cette seulement fonctionne que si les deux blocs contiennent le même nombre de lignes. Essayez d'ajouter plus de mots à l'un de vos blocs et vous verrez que sans forcer
vertical-align:top
sur le deuxième bloc, il va se déplacer en fonction du nombre de lignes de texte existent dans le premier bloc.Edit: Trouvé une question connexe Pourquoi est-ce inline-block élément poussé vers le bas?
Vous devez ajouter
vertical-align: top;
à.divAccountPicker
démo...............................
Salut maintenant ajouter
vertical-align:top
dans votre.divAccountData, .divAccountPicker
classecomme ce
Démonstration en direct
si vous avez utilisé pour
display:inline-block;
que tous les moyensvertical-align:top
essayer cette
jsFiddle