Alinee las DIV de bloque en línea con la parte superior del elemento contenedor

Cuando dos div inline-block tienen diferentes alturas, ¿por qué el más corto de los dos no se alinea con la parte superior del contenedor? ( 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; } 

¿Cómo puedo alinear el pequeño div en la parte superior de su contenedor?

Debido a que vertical-align se establece en la línea de base como por defecto.

Use esto en su lugar:

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

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

O como @ f00644 dijo que también podría aplicar float a los elementos secundarios.

Necesita agregar una propiedad de vertical-align a sus dos divisiones secundarias.

Si .small es siempre más corto, solo necesita aplicar la propiedad a .small . Sin embargo, si cualquiera podría ser más alto, entonces debe aplicar la propiedad a ambos .small y .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; } 

La alineación vertical afecta a las casillas en línea o de celdas de tabla, y hay una gran cantidad de valores diferentes para esta propiedad. Consulte https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align para obtener más detalles.

   

Agregar desbordamiento: automático al contenedor div. http://www.quirksmode.org/css/clearing.html Este sitio web muestra algunas opciones al tener este problema.