Alignez l'élément DIV en bloc en ligne sur le haut de l'élément conteneur
P粉682987577
P粉682987577 2023-08-21 20:17:02
0
2
379
<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>
P粉682987577
P粉682987577

répondre à tous(2)
P粉786432579

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.

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

P粉744831602

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.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal