Muchas veces necesitamos flotar una imágen a un lado u otro de un parrafo, mientras el texto esta alrededor de él. Logrando un efecto semejante a las revistas que tienen los artículos que se colocan alrededor de imágenes de diversas formas y tamaños.
Para conseguir que una imagen flote al lado izquierdo de un parrafo mientras el texto fluye alrededor. utilizaremos la propiedad "float" con valor "left" para obtener este efecto.
Código CSS:
Mediante "float:left" hacemos que la imagen flote a la izquierda, ademas añadimos un relleno alrededor de la imagen con "padding:7px;"
.flotar-iz {float:left;padding:7px;}
Código HTML:
para hacer que una o más imágenes floten al lado izquierdo añadiremos el atributo class="flotar-iz"
<body>
<p><img src="image.jpg" class="flotar-iz" />
Lorem ipsum dolor sit amet, consectetuer...</p>
</body>
Para conseguir que una imagen flote al lado derecho de un parrafo mientras el texto fluye alrededor. utilizaremos la propiedad float con valor right, para obtener este efecto.
Código CSS:
Mediante "float:right" hacemos que la imagen flote a la derecha, ademas añadimos un relleno alrededor de la imagen con "padding:7px;"
.flotar-de {float:right;padding:7px;}
Código HTML:
para hacer que una o mas imagenes floten al lado derecho añadiremos el atributo class="flotar-de"
<body>
<p><img src="image.jpg" class="flotar-de" />
Lorem ipsum dolor sit amet, consectetuer...</p>
</body>
Maquetación con CSS, HTML flotar bloques, layout o cajas. Diseño web estandar, colores CSS, ancho, alto.
Ver más »Códigos CSS para imágenes, casos prácticos, ejemplos.
Ver más »Volumen de letras, fuentes, tipografía, interlineado, tamaño de texto, subrayado, efectos de texto:
Ver más »Aprenderemos a estructurar y diseñar todo tipo de menus con CSS mediante ejemplos y casos prácticos.