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

199

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

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

css Youssef
fuente
o flotarlos
AO_
Echa un vistazo
Sr. Alien
1
aplicar vertical-align: top; para la clase .small
Deepu Sasidharan
1
No quiero usar flotador. gracias @ Mr.Alien funciona ahora :)
Youssef

Respuestas:

347

Porque el vertical-alignse establece en la línea de base por defecto.

Use en su vertical-align:toplugar:

.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 dijo @ f00644 , también podría aplicar floata los elementos secundarios.

Lighty_46
fuente
Si aplico el flotador tendré un problema de altura si el contenedor tiene flotador para niños como en mi caso. Echa un vistazo aquí artículo
Youssef
1
¿Alguna idea de por qué baselinees el valor predeterminado? Estoy seguro de que hay una buena razón, pero para un inesperado, parece extraño. Terminas con un efecto de horizonte de Manhattan.
Sridhar Sarnobat
La alineación vertical se usa para la alineación de fuentes, ya que las fuentes tienen una línea de base, es lógico que el valor predeterminado se resuelva en la línea de base. En otras ocasiones como esta, debes sobrescribirlo.
ceed
25

Necesita agregar una vertical-alignpropiedad a sus dos divisiones secundarias.

Si .smallsiempre es 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 .smally .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.

michaelward82
fuente
-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
fuente
Creo que simplemente cambiar las propiedades de visualización predeterminadas de un tramo de en línea a bloque hará el truco.
holyghostgym