Alinhar DIVs de bloco embutido na parte superior do elemento do contêiner

199

Quando dois inline-block divs têm alturas diferentes, por que o menor dos dois não se alinha ao topo do contêiner? ( 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>
Expandir snippet

Como alinhar o pequeno divna parte superior do contêiner?

css Youssef
fonte
ou flutue-os assim: jsfiddle.net/RHM5L/12
AO_
Dê uma olhada
Mr. Alien
1
aplicar alinhamento vertical: top; para .small classe
Deepu Sasidharan
1
Eu não quero usar float. graças @ Mr.Alien ele funciona agora :)
Youssef

Respostas:

347

Porque o vertical-aligné definido na linha de base como padrão.

Use em vertical-align:topvez disso:

.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 como @ f00644 disse que você também pode aplicar floataos elementos filhos.

Lighty_46
fonte
Se eu aplicar o flutuador, terei um problema de altura se o contêiner apenas flutuar para crianças, como no meu caso. Dê uma olhada aqui artigo
Youssef
1
Alguma idéia de por que baselineo padrão é? Tenho certeza de que há uma boa razão, mas para quem não espera, isso parece estranho. Você acaba com um efeito de horizonte de Manhattan.
Sridhar Sarnobat
O alinhamento vertical é usado para o alinhamento de fontes, já que as fontes têm linha de base, é lógico que o padrão seja resolvido como linha de base. Em outras ocasiões como esta, você deve substituí-lo.
CEED
25

Você precisa adicionar uma vertical-alignpropriedade aos seus dois filhos filhos.

Se .smallfor sempre mais curto, você só precisará aplicar a propriedade .small. No entanto, se qualquer um puder ser o mais alto, aplique a propriedade a ambos .smalle .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;   
}

O alinhamento vertical afeta as caixas de linha ou de célula de tabela e há um grande número de valores diferentes para essa propriedade. Consulte https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align para obter mais detalhes.

michaelward82
fonte
-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
fonte
Eu acho que simplesmente alterar as propriedades de exibição padrão de uma extensão de inline para bloquear fará o truque.
Holyghostgym