Cómo flotador de una imagen mediante la span style

"Flotadores" ayudar a hacer el diseño web diseños intrincados posible. Los desarrolladores profesionales usan el atributo CSS "flotar" a la posición imágenes y otros objetos en las páginas Web. El uso de un estilo de "flotar a la izquierda", por ejemplo, puede hacer que el texto en un elemento span HTML envolver alrededor de la parte derecha de la imagen. Es posible que haya visto este patrón de diseño durante la visualización de artículos de periódicos y revistas que contienen el ajuste de texto alrededor de las imágenes. Aprender a flotar una imagen en una página web y descubra un mundo de nuevas capacidades de formato de texto que pueden mejorar su sitio.

Instrucciones

1 Abrir un documento HTML utilizando el Bloc de notas o su editor HTML.

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

<Img class = "floatImageLeft" />

<Span>

test test test test test test test test test test test test test test test test

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 - usando una etiqueta img - y de un palmo. El lapso contiene texto, que envolverá alrededor de la imagen. Tenga en cuenta que la imagen img referencia a una clase CSS llamada "floatLeft." Reemplazar "testImage.png" con la dirección 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" se encuentra en una carpeta llamada "Imágenes" en su unidad "C", crear la etiqueta img de la siguiente manera:

<Img class = "floatImageLeft" />

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

<Style type = "text / css">

.floatImageLeft {

flotador izquierdo;

margin-left: 10px;

margin-right: 20px;

}

.floatImageRight {

flotar derecho;

margin-left: 10px;

margin-right: 20px;

}

</ Style>

La clase floatImageLeft, al que hace referencia la imagen, contiene un atributo de flotación. El valor de este atributo es "left". Este valor indica a los 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.

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

5 Regrese 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.

6 Pulse la tecla "F5" para volver a cargar el navegador. La imagen se desplaza hacia el lado derecho de la página web y el texto se ajusta alrededor lado izquierdo de la imagen.

Consejos y advertencias

• Los ajustes de los márgenes definidos en las clases CSS float, aseguran que sus imágenes no se aferran demasiado a ambos lados de la página Web. Este espacio en blanco adicional entre una imagen y el borde de una página web ayuda a crear un diseño de aspecto 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. Experimenta con diferentes valores para los márgenes izquierdo y derecho de ver cómo los diferentes valores afecta a la apariencia de la imagen y abarcan.