Richten Sie Inline-Block-DIVs oben am Containerelement aus

198

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>
Erweitern Sie das Snippet

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

css Youssef
quelle
oder schweben Sie sie so: jsfiddle.net/RHM5L/12
AO_
Werfen Sie einen Blick
Mr. Alien
1
vertikal ausrichten: oben; für .kleine Klasse
Deepu Sasidharan
1
Ich möchte nicht Float verwenden. danke @ Mr.Alien es funktioniert jetzt :)
Youssef

Antworten:

345

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 .

Lighty_46
quelle
Wenn ich den Schwimmer anwende, habe ich ein Problem mit der Höhe, wenn der Container nur schwimmende Kinder hat, wie in meinem Fall. Werfen Sie einen Blick hier Artikel
Youssef
1
Irgendeine Idee, warum baselineist die Standardeinstellung? Ich bin mir sicher, dass es einen guten Grund gibt, aber für einen Nichterwartenden scheint es einfach seltsam. Sie erhalten einen Skyline-Effekt von Manhattan.
Sridhar Sarnobat
Die vertikale Ausrichtung wird für die Ausrichtung von Schriftarten verwendet. Da Schriftarten eine Grundlinie haben, ist es nur logisch, dass die Standardeinstellung in Grundlinie aufgelöst wird. In anderen Fällen wie diesem müssen Sie es überschreiben.
Ceed
25

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 .

michaelward82
quelle
-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
quelle
Ich denke, dass das einfache Ändern der Standardanzeigeeigenschaften einer Spanne von Inline zu Block den Trick macht.
Holyghostgym