Alignez le DIV du bloc en ligne au-dessus de l'élément conteneur

Question

Lorsque deux inline-block div ont des hauteurs différentes, pourquoi le plus court ne s'aligne-t-il pas avec le haut du conteneur ? (DEMO) :

.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>

Comment aligner un petit div en haut de son conteneur ?

Answer 1

Vous devez ajouter des attributs vertical-align aux deux divs enfants.

Si.small始终较短，则只需将该属性应用于.small. Cependant, si l’un d’entre eux est le plus élevé, alors cet attribut doit être appliqué à .small和.big.

.container{ 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue; 
    vertical-align: top;   
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige; 
    vertical-align: top;   
}

L'alignement vertical affecte les zones de cellules en ligne ou de tableau, 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.

Answer 2

Parce que par défaut, vertical-align est défini sur baseline.

Utilisez plutôt vertical-align:top : 

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top; /* <---- this */
}

http://jsfiddle.net/Lighty_46/RHM5L/9/

Ou comme @f00644 l'a dit, vous pouvez également appliquer float aux éléments enfants.