Descubrí un extraño problema de CSS esta mañana y espero que los expertos en CSS me puedan ayudar. En this demo, ¿por qué el texto en el div rojo lo empuja hacia abajo? Esperaba que los dos div estuvieran uno al lado del otro. ¡Gracias!
EDITAR: Gracias chicos por las respuestas. Aceptaré una respuesta en un momento. ¿Puede alguien explicar por qué ocurre esto?Texto en div en línea bloqueándolo hacia abajo
...........................
Hola ahora se utiliza para vertical-align: top;
div {
display: inline-block;
height: 50px;
width: 50px;
vertical-align: top;
}
Al agregar float:left se resuelve el problema.
pienso sería interesante saber por qué funciona de esta manera con el texto. –
@TimotheeTosi Noté que no sé por qué, házmelo saber. Gracias. – freebird
"inline-block le dice a los navegadores que coloquen ese elemento en línea, pero que lo traten como si fuera un elemento de nivel de bloque". ¡Entonces puedes flotar! http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/ – BenRacicot
¿Puede explicar por qué no utilizó el flotador?: a la izquierda, esta es una solución limpia. + 1 para esto. – freebird
Sí, creo que esta es la mejor solución. ¡Gracias! :) ¿Sabes por qué el texto causó ese problema? – Abraham
puede usar para mostrar el bloque en línea que significa que by defulat inline-block es la línea de base que define para siempre alinear verticalmente arriba si define mostrar el elemento de bloque en línea en cualquier elemento html. –