Maison  >  Questions et réponses  >  le corps du texte

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

<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> <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> <p>Comment aligner un petit <code>div</code> en haut de son conteneur ? </p>
P粉982881583P粉982881583447 Il y a quelques jours500

répondre à tous(2)je répondrai

  • P粉203792468

    P粉2037924682023-08-22 12:35:59

    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.

    répondre
    0
  • P粉823268006

    P粉8232680062023-08-22 09:52:17

    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.

    répondre
    0
  • Annulerrépondre