Richten Sie Inline-Block-DIVs oben am Containerelement aus

Wenn zwei inline-block divs unterschiedliche Höhen haben, warum richtet sich das kürzere der beiden nicht an der Oberseite des Containers aus? ( DEMO ):

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

Wie kann ich das kleine divoben am Behälter ausrichten ?

Weil das standardmäßig vertical-alignan der Basislinie festgelegt ist.

Verwenden Sie vertical-align:topstattdessen:

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

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

Oder wie @ f00644 sagte, können Sie sich auch floatauf die untergeordneten Elemente anwenden .

Sie müssen vertical-alignIhren zwei untergeordneten Divs eine Eigenschaft hinzufügen .

Wenn .smallimmer kürzer ist, müssen Sie nur die Eigenschaft anwenden auf .small. Wenn jedoch einer der beiden Werte am höchsten sein könnte, sollten Sie die Eigenschaft auf beide .smallund anwenden .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;   
}

Die vertikale Ausrichtung wirkt sich auf Inline- oder Tabellenzellenfelder aus, und für diese Eigenschaft gibt es eine große Anzahl unterschiedlicher Werte. Weitere Informationen finden Sie unter https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align .

<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/>");

})

Überlauf hinzufügen: auto zum Container div. http://www.quirksmode.org/css/clearing.html Diese Website zeigt einige Optionen, wenn dieses Problem auftritt.