Alinhar DIVs de bloco inline ao topo do elemento de contêiner

Quando duas inline-block têm alturas diferentes, por que a menor das duas não está alinhada com a parte superior do contêiner? ( DEMO ):

HTML:

 

CSS:

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

Como posso alinhar o pequeno div na parte superior do contêiner?

   

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

Use isso em vez 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ê poderia aplicar float para os elementos filhos também.

Você precisa adicionar uma propriedade de vertical-align às suas duas divs filho.

Se .small é sempre mais curto, você só precisa aplicar a propriedade para .small . No entanto, se um dos dois puder ser mais alto, você deverá aplicar a propriedade a .small e .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 checkboxs inline ou table-cell e há um grande nubmer de valores diferentes para essa propriedade. Por favor, veja https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align para mais detalhes.

   

Adicionar estouro: auto ao contêiner div. http://www.quirksmode.org/css/clearing.html Este site mostra algumas opções ao ter esse problema.