Si está interesado en aprender a hacer flotar una imagen a la derecha del texto, es una tarea bastante simple. Hay muchas situaciones en las que los programadores quieren que una imagen de una página web aparezca dentro del texto con el texto fluyendo o envuelto alrededor. Manipulando imágenes es similar a manipular texto, por lo que si tiene experiencia con este último, este proceso no debería ser difícil en absoluto.
De hecho, con la propiedad flotante de CSS, es fácil hacer flotar su imagen a la derecha del texto y hacer que el texto fluya a su alrededor en el lado izquierdo. Utilice este tutorial de cinco minutos para aprender a hacerlo.
Configurar un diseño con Float
Este diseño básico creará un espacio para su texto y hará flotar una imagen a la derecha de ese texto. Ciertamente, estos diseños pueden volverse más complicados, pero este ejemplo le mostrará el principio básico detrás del trabajo con flotante y texto.
Suponiendo que ya tiene un documento HTML con el que está trabajando y una hoja de estilo CSS separada, comience creando un nuevo div que actúe como la fila que contiene su elemento flotante.
Dale a ese nuevo div dos clases, contenedor y clearfix. Hay muchas formas de manejar esto, y los nombres son completamente su elección, pero estos lo ayudarán a mantenerse organizado y establecer su diseño.
-
En su CSS, defina cómo desea que su contenedor se ajuste a su diseño general. Este ejemplo lo convertirá en una fila de ancho completo.
.envase {
ancho: 100%;
altura: 25rem;
} -
A continuación, ocúpese de la clase clearfix. El clearfix es necesario porque float puede crear algunos fallos extraños en su diseño. La definición de la propiedad "overflow" en clearfix evita que los elementos flotantes se desborden de su espacio designado.
.clearfix {
desbordamiento: automático;
} -
Ahora, puede crear un elemento dentro de su contenedor div y flotarlo hacia la derecha. Si envuelve texto alrededor de una imagen, esta sería su imagen. Cree el elemento y asígnele una clase para la propiedad float.
-
Crea la clase para tu flotador. Probablemente también querrá agregar un poco de estilo, si va a hacer más elementos idénticos. De lo contrario, puede aplicar una clase separada para su estilo.
.flotar derecho {
flotar derecho;
ancho: 300px;
altura: 200px;
color de fondo: rojo;
margen: 0 0 0.5rem 0.5rem
} -
Si está buscando ajustar el texto alrededor de ese elemento flotante, inserte su texto ahora. Colóquelo en cualquier lugar del recipiente, ya sea antes o después del elemento flotante.
Algún texto
Más texto
...y así.
-
Actualiza tu página y mira el resultado.
Terminando
Y eso lo hace. Ahora ves que flotar una imagen a la derecha no es nada difícil. También puede interesarle hacer flotar una imagen a la izquierda y flotarla al centro. Si bien el primer movimiento es posible, desafortunadamente, no puede hacer flotar una imagen hacia el centro, ya que eso generalmente requeriría un diseño de dos columnas.