Aligner les DIV en bloc en ligne sur le haut de l'élément conteneur

200

Lorsque deux inline-block divs ont des hauteurs différentes, pourquoi le plus court des deux ne s'aligne-t-il pas sur le haut du conteneur? ( DÉMO ):

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

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

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige;    
}
<div class="container">
    <div class="small"></div>
    <div class="big"></div>
</div>
Développer l'extrait

Comment aligner le petit diven haut de son contenant?

css Youssef
la source
ou faites
AO_
Jetez un oeil
M. Alien
1
appliquer l'alignement vertical: haut; pour la classe .small
Deepu Sasidharan
1
je ne veux pas utiliser float. merci @ Mr.Alien ça marche maintenant :)
Youssef

Réponses:

348

Parce que le vertical-alignest défini par défaut sur la ligne de base .

Utilisez vertical-align:topplutôt:

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

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

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

Lighty_46
la source
Si j'applique le flotteur, j'aurai un problème de hauteur si le conteneur vient de flotter pour les enfants comme dans mon cas. Jetez un oeil ici article
Youssef
1
Une idée pourquoi baselineest la valeur par défaut? Je suis sûr qu'il y a une bonne raison, mais pour un non-espoir, cela semble juste bizarre. Vous vous retrouvez avec un effet d'horizon de Manhattan.
Sridhar Sarnobat
L'alignement vertical est utilisé pour l'alignement des polices, car les polices ont une ligne de base, il est logique que la valeur par défaut soit résolue en ligne de base. Dans d'autres occasions comme celle-ci, vous devez l'écraser.
ceed
25

Vous devez ajouter une vertical-alignpropriété à vos deux enfants div.

Si elle .smallest toujours plus courte, il vous suffit d'appliquer la propriété à .small. Cependant, si l'un ou l'autre peut être le plus grand, vous devez appliquer la propriété aux deux .smallet .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 boîtes en ligne ou les cellules de tableau, et il existe un grand nombre de valeurs différentes pour cette propriété. Veuillez consulter https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align pour plus de détails.

michaelward82
la source
-1 
<style type="text/css">
        div {
  text-align: center;
         }

         .img1{
            width: 150px;
            height: 150px;
            border-radius: 50%;
         }

         span{
            display: block;
         }
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
  <span class='dif'></span>
  <br>
  <button>ADD</button>
</div>

<script type="text/javascript">

$('button').click(function() {
  $('.dif').html("<img/>");

})
Holyghostgym
la source
Je pense que le simple fait de changer les propriétés d'affichage par défaut d'un span de inline en block fera l'affaire.
Holyghostgym