Alinear los DIV de bloques en línea con la parte superior del elemento contenedor
Cuando dos inline-block divs tienen diferentes alturas, ¿por qué la más corta de las dos no se alinea con la parte superior del contenedor? ( DEMOSTRACIÓN ):
.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>¿ Cómo puedo alinear el pequeño diven la parte superior de su contenedor?
Porque vertical-alignestá configurado en la línea de base de forma predeterminada.
Utilice vertical-align:topen su lugar:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
O como dijo @f00644,float también se puede aplicar a los elementos secundarios.
Debe agregar una vertical-alignpropiedad a los dos div secundarios.
Si .smallsiempre es más corto, solo necesita aplicar la propiedad a .small. Sin embargo, si cualquiera de los dos pudiera ser el más alto, entonces deberías aplicar la propiedad a ambos .smally a .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 los cuadros en línea o de celda 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.
