Alignez l'élément DIV en bloc en ligne sur le haut de l'élément conteneur
P粉682987577
2023-08-21 20:17:02
<p>Lorsque deux <code>inline-block</code> <code>div</code> ont des hauteurs différentes, pourquoi le plus court ne s'aligne-t-il pas avec le haut du conteneur ? (<strong>DEMO</strong>) : </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.container {
bordure : 1px noir uni ;
largeur : 320 px ;
hauteur : 120px ;
}
.petit {
affichage : bloc en ligne ;
largeur : 40 % ;
hauteur : 30 % ;
bordure : 1px noir uni ;
fond : bleu alice ;
}
.grand {
affichage : bloc en ligne ;
bordure : 1px noir uni ;
largeur : 40 % ;
hauteur : 50 % ;
fond : beige ;
}</pré>
<pre class="brush:html;toolbar:false;"><div class="container">
<div class="small"></div>
<div class="big"></div>
</div></pre>
<p><br /></p>
<p>Comment aligner un petit <code>div</code> en haut de son conteneur ? </p>
Vous devez ajouter des attributs
vertical-align
aux deux divs enfants.Si
.small
始终较短,则只需将该属性应用于.small
. Cependant, si l’un d’entre eux est éventuellement le plus élevé, alors cet attribut doit être appliqué à.small
和.big
.L'alignement vertical affecte les zones de cellule dans la ligne ou dans le tableau, et cette propriété a de nombreuses valeurs différentes. Veuillez consulter https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align pour plus de détails.
Parce que par défaut,
vertical-align
est défini sur baseline.Utilisez plutôt
vertical-align:top
:http://jsfiddle.net/Lighty_46/RHM5L/9/
Ou comme @f00644 l'a dit, vous pouvez également appliquer
float
aux éléments enfants.