La siguiente es una publicación de invitado de Gustav Andersson, quien ha ideado una pequeña técnica inteligente para un problema de flujo de texto. Yo mismo he luchado con esto en el pasado, así que estoy feliz de agregar esta técnica a la vieja caja de herramientas. Sin mencionar, otro de estos.
Un ejemplo donde una imagen flotante deja algunas palabras huérfanas.
Una imagen flotante quita el espacio horizontal del texto que fluye a su alrededor. En diseños de ancho fijo, puede verificar que el espacio dejado para el texto sea suficiente para crear una columna de aspecto decente, con la seguridad de saber que todos los demás verán lo mismo.
Sin embargo, en un diseño fluido, no tiene tal garantía. Si un usuario ve su sitio en un dispositivo más pequeño, es posible que el espacio horizontal dejado para el texto solo quepa una palabra o dos por línea. Una columna de texto tan estrecha no solo se ve fea; también es frágil. Una oración que contiene una palabra larga se dividirá cuando la palabra larga se mueva hacia abajo debajo de la imagen flotante, dejando atrás un espacio vacío en la mitad de la oración.
El ancho de párrafo mínimo esquivo
Para resolver el problema de los párrafos demasiado estrechos, necesitamos una forma de implementar un ancho de párrafo mínimo. Si el espacio dejado por la imagen flotante está por debajo de este ancho, entonces todo el párrafo se mueve hacia abajo debajo de la imagen.
El borde rojo es el límite del elemento de párrafo.
Intuitivamente, el siguiente CSS parece encajar a la perfección:
p {
min-width: 10em;
/* For demonstration */
border: 1px solid red;
}Sin embargo, esto no tiene ningún efecto. La imagen flota sobre el párrafo y, por lo tanto, no reduce el ancho “oficial” del párrafo. Mientras tanto, el texto dentro del párrafo se aparta obedientemente para dejar espacio a la imagen flotante, por lo que el problema persiste.
La solución de consulta de medios para anchos de imagen conocidos
La solución Media Query funciona, pero requiere imágenes de ancho fijo.
Si sus imágenes (u otro contenido flotante) comparten un ancho fijo y predefinido, entonces puede usar las consultas de medios CSS3 para deshabilitar la flotación en tamaños de pantalla que son demasiado estrechos para ajustarse tanto a una imagen como a una columna de texto una al lado de la otra.
Por supuesto, esta solución solo funcionará en navegadores que admitan consultas de medios CSS. Para otros navegadores, la solución se degrada al problema original.
@media screen and (max-width: 400px) {
img {
float: none;
}
}Solución de caso general utilizando pseudoelemento
La solución de consulta de medios no funciona cuando los elementos flotantes tienen anchos arbitrarios, ni es muy elegante.
Este ejemplo muestra la regla del pseudo-elemento en su lugar, mostrando un borde verde delgado que rodea al pseudo elemento. Tanto el elemento como el párrafo están debajo de la imagen.
Una mejor solución es darle a cada párrafo un pseudoelemento CSS invisible con el ancho de párrafo mínimo deseado. Si no hay suficiente espacio para caber este pseudo-elemento, entonces será empujado hacia abajo debajo de la imagen, llevándose el párrafo con él.
Esta solución es compatible con la mayoría de los navegadores. En los navegadores más antiguos, la solución se degrada elegantemente al problema original.
p:before {
content: "";
width: 10em;
display: block;
overflow: hidden;
/* For Demonstration */
border: 1px solid green;
}El pseudo elemento es verde border está ahí solo para fines de demostración. No es necesario para la solución y debe eliminarlo en su código. El pseudo elemento no ocupará ningún espacio vertical.
Demo y descarga
Ver demostración Descargar archivos
Sobre el Autor
Gustav Andersson es el autor de The Modern Nomad, un sitio que explora estilos de vida nómadas que libera a las personas para vivir y trabajar en cualquier lugar y en cualquier momento. Es un quemador amante de la gramática que baila tango, lucha y quiere inspirar Uds considerar una vida sin dirección.