Cómo flotar una imagen utilizando el estilo de Span

Un flotador CSS, al igual que su homólogo de la vida real, ayuda a mover los objetos.

 

"Flotadores" ayudan a hacer posible intrincados esquemas de trazado Web. Los desarrolladores profesionales utilizan el atributo "float" CSS para posicionar las imágenes y otros objetos en las páginas Web. El uso de un "float izquierda" de estilo, por ejemplo, puede hacer que el texto en una envoltura elemento span HTML por el lado derecho de la imagen. Es posible que haya visto este patrón de diseño al ver artículos de revistas y periódicos que contienen ajuste del texto alrededor de las imágenes. Aprenda a flotar una imagen en una página Web y descubrir un mundo de nuevas capacidades de formato de texto que puede mejorar su sitio.

 

Abra un documento HTML con el Bloc de notas o tu editor de HTML.

 

Pega este código en la sección del cuerpo de su documento:

 

img class = src "floatImageLeft" = "testImage.png" /

 

lapso

 

prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba

 

prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba

 

prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba

 

prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba

 

prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba prueba

 

prueba

 

/ Span

 

Este código crea una imagen - mediante una etiqueta img - y de un palmo. La vida contiene texto que se envuelva alrededor de la imagen. Tenga en cuenta que la referencia a la imagen de una clase CSS img nombrado "floatLeft." Reemplazar "testImage.png" con la URL de una imagen en la Web o el nombre de ruta de una imagen en su disco duro. Por ejemplo, si una imagen llamada "park.gif" está en una carpeta denominada "Imágenes" en la unidad "C", cree la etiqueta img de la siguiente manera:

 

img class = src "floatImageLeft" = "C: \ Images \ park.gif" /

 

Pegue las siguientes definiciones de clase CSS en la sección de la cabeza de su documento:

 

Tipo style = "text / css"

 

. FloatImageLeft {

 

float: left;

 

margin-left: 10px;

 

margin-right: 20px;

 

}

 

. FloatImageRight {

 

float: right;

 

margin-left: 10px;

 

margin-right: 20px;

 

}

 

/ Estilo

 

La clase floatImageLeft, al que hace referencia la imagen, contiene un atributo float. El valor de este atributo es "left". Este valor indica navegadores para flotar objetos en el lado izquierdo de una página Web. La clase "floatImageRight" flota objetos en el lado derecho de una página.

 

Guarde el documento y abrirlo con un navegador. La clase floatLeft hace que la imagen de flotar a la parte izquierda de la página Web, el texto se ajusta alrededor de la derecha de la imagen.

 

Volver a la sección del cuerpo del documento HTML y cambiar el código "floatImageLeft" a "floatImageRight" en la etiqueta img. Guarde el documento, y luego volver a su navegador.

 

Pulse la tecla "F5" para recargar el navegador. La imagen se desplaza hacia el lado derecho de la página Web y el texto se ajusta alrededor de la izquierda de la imagen.

 

Consejos y advertencias

Los valores de los márgenes, que se define en las clases CSS float, aseguran que sus imágenes no aferrarse demasiado a ambos lados de la página Web. Este espacio en blanco adicional entre la imagen y el borde de una página Web ayuda a crear un diseño más profesional. Los valores de los márgenes también le permiten controlar la distancia entre la imagen y el texto adyacente situada en el lapso.Experimente con diferentes valores para los márgenes izquierdo y derecho de ver cómo diferentes valores afectan a la apariencia de su imagen y la duración.