Wyrównaj DIV z blokiem wbudowanym do górnej części elementu kontenera

198

Kiedy dwa inline-block divmają różne wysokości, dlaczego krótszy z nich nie wyrównuje się z górną krawędzią pojemnika? ( 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>
Rozwiń fragment kodu

Jak mogę wyrównać małe divna górze pojemnika?

css Youssef
źródło
lub przenieś je tak: jsfiddle.net/RHM5L/12
AO_
Spójrz
Mr. Alien
1
zastosuj wyrównanie w pionie: góra; dla klasy .small
Deepu Sasidharan
1
nie chcę używać pływaka. dzięki @ Mr.Alien to działa teraz :)
Youssef

Odpowiedzi:

346

Ponieważ vertical-alignjest ustawiony domyślnie na poziomie podstawowym .

vertical-align:topZamiast tego użyj :

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

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

Lub jak @ f00644 powiedział, że możesz również zastosować floatdo elementów potomnych.

Lighty_46
źródło
Jeśli zastosuję pływak, będę miał problem z wysokością, jeśli pojemnik będzie miał pływak dla dzieci, jak w moim przypadku. Spójrz tutaj artykuł
Youssef
1
Każdy pomysł, dlaczego baselinejest domyślny? Jestem pewien, że jest dobry powód, ale dla nieoczekiwanego wydaje się to dziwne. W efekcie powstaje efekt panoramiczny Manhattanu.
Sridhar Sarnobat
Wyrównanie pionowe służy do wyrównania czcionek, ponieważ czcionki mają linię bazową, logiczne jest, że domyślna jest linia bazowa. W innych przypadkach, takich jak ten, musisz go zastąpić.
ceed,
25

Musisz dodać vertical-alignwłaściwość do div dwóch dzieci.

Jeśli .smallzawsze jest krótszy, wystarczy zastosować właściwość do .small. Jeśli jednak którykolwiek z nich może być najwyższy, powinieneś zastosować tę właściwość zarówno do, jak .smalli do .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;   
}

Wyrównanie w pionie wpływa na pola śródliniowe lub komórki tabeli, a dla tej właściwości istnieje duża liczba różnych wartości. Więcej informacji na stronie https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align .

michaelward82
źródło
-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
źródło
Myślę, że wystarczy zmienić domyślne właściwości wyświetlania zakresu z wbudowanego na blokowy.
holyghostgym