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
Respuesta
...........................
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
- 1. Desalineación con bloque en línea (otros elementos empujados hacia abajo)
- 2. jQuery Anteponer un DIV deslizándolo hacia abajo
- 3. Un elemento con más texto empuja hacia abajo otros elementos de bloque en línea. ¿Por qué?
- 4. Apilando imágenes de abajo hacia arriba en div
- 5. Escala div en dirección hacia arriba, en lugar de hacia abajo?
- 6. Android TextView desplazado hacia abajo
- 7. div jump después de que se deslice hacia abajo
- 8. Manteniendo el desplazamiento hacia abajo
- 9. Desbordamiento de Div Desplazamiento hacia abajo: ¿Es posible?
- 10. Cómo muevo los elementos hacia arriba o hacia abajo en el archivo de texto
- 11. Usando TDD: "arriba hacia abajo" vs. "abajo hacia arriba"
- 12. Gramática: ¿diferencia entre arriba hacia abajo y hacia abajo? (Ejemplo)
- 13. Segundo DIV no se alinea, se empuja hacia abajo
- 14. ¿Diseño de arriba hacia abajo o de abajo hacia arriba?
- 15. El texto en la vista de texto se desliza hacia abajo en Android 3.0
- 16. Android WebView desplácese hacia abajo
- 17. crea una diapositiva div abajo sin empujar el contenido hacia abajo
- 18. Redondeo de valores hacia arriba o hacia abajo en C#
- 19. Redondeo hacia arriba o hacia abajo en la velocidad
- 20. usuario desplazarse hacia abajo o hacia arriba en jQuery
- 21. Mover nodo en árbol hacia arriba o hacia abajo
- 22. NSScrollView saltando hacia abajo en desplazamiento
- 23. Línea de texto no deseada en div
- 24. cambio de un trozo de texto hacia abajo usando CSS
- 25. Mover hacia arriba personaje aparece en línea
- 26. Cómo hacer que un div interno empuje el div externo hacia abajo
- 27. ¿Cómo desplazo un RichTextBox hacia abajo?
- 28. RelativeLayout - Se desplaza hacia abajo
- 29. UITextView desplazamiento automático hacia abajo
- 30. Cómo desplazarse hacia abajo - JQuery
¿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. –