Como flotar unha imaxe á esquerda do texto nunha páxina web

Usando CSS para aliñar unha imaxe no lado esquerdo dunha páxina web Deseño

Mire case en calquera páxina web hoxe e verás unha combinación de texto e imaxes que compoñen a maioría destas páxinas. É moi sinxelo engadir texto e imaxes a unha páxina . O texto está codificado usando etiquetas HTML estándar como parágrafos, listas e títulos, mentres que as imaxes están incluídas usando o elemento .

A capacidade de facer que o texto e esas imaxes funcionen ben é o que diferencia os grandes deseñadores web. Non só quere que o seu texto e as imaxes aparezan un despois do outro, que é como estes elementos de nivel do bloqueo estarán predeterminados. Non, desexa controlar o xeito no que o texto e as imaxes xorden no que será o deseño visual do seu sitio web.

Dispoñer dunha imaxe aliñada ao lado esquerdo dunha páxina mentres o texto da páxina flúe ao redor é un tratamento de deseño común para o deseño impreso e tamén para as páxinas web. En termos web, este efecto coñécese como flotante da imaxe . Este estilo conséguese coa propiedade CSS para "flotar". Esta propiedade permite que o texto flúa pola imaxe da dereita á esquerda. (Ou ao redor dunha imaxe aliñada á dereita ao seu lado esquerdo). Vexamos a forma de conseguir este efecto visual.

Comezar con HTML

O primeiro que terás que facer é ter algún HTML para traballar. Para o noso exemplo, imos escribir un parágrafo de texto e engadir unha imaxe ao comezo do parágrafo (antes do texto, pero despois da etiqueta de apertura

). Aquí está o que semella que se ve o marcador HTML:

O texto do parágrafo vai aquí. Neste exemplo, temos unha imaxe dunha foto de headshot, polo que este texto probablemente tratará sobre a persoa a quen está o headshot.

Por defecto, a nosa páxina web mostraríase coa imaxe de arriba do texto. Isto ocorre porque as imaxes son elementos de nivel de bloque en HTML. Isto significa que o navegador mostra os saltos de liña antes e despois do elemento de imaxe por defecto. Cambiamos este aspecto predeterminado, volvendo a CSS. Primeiro, con todo, engadiremos un valor de clase ao noso elemento de imaxe . Esa clase actuará como un "gancho" que usaremos máis tarde no noso CSS.

O texto do parágrafo vai aquí. Neste exemplo, temos unha imaxe dunha foto de headshot, polo que este texto probablemente tratará sobre a persoa a quen está o headshot.

Teña en conta que esta clase de "esquerda" non fai nada por si mesmo. Para que poidamos acadar o noso estilo desexado, necesitamos usar CSS a continuación.

Estilos CSS

Co noso HTML no lugar, incluído o noso atributo de clase "esquerda", agora podemos recorrer a CSS. Engadiremos unha regra á nosa folla de estilo que flotaría esa imaxe e tamén engadirá un pequeno recheo xunto a el para que o texto que finalmente envolverá a imaxe non se acumulará demasiado. Aquí tes a CSS que podes escribir:

.left {float: left; padding: 0 20px 20px 0; }

Este estilo flutxe esa imaxe á esquerda e engade un pouco de recheo (usando algúns taquigrafía CSS) á dereita e ao fondo da imaxe.

Se revisaches a páxina que contén este HTML nun navegador, a imaxe agora estaría aliñada á esquerda e o texto do parágrafo aparecería á súa dereita cunha cantidade adecuada de espazo entre os dous. Teña en conta que o valor de clase de "esquerda" que empregamos é arbitrario. Poderiamos chamalo de todo porque o termo "esquerda" non fai nada por si mesmo. Isto ten que ter un atributo de clase no HTML que funcione cun estilo CSS real que determina os cambios visuais que está a procurar facer.

Formas alternativas para acadar estes estilos

Este enfoque de darlle ao elemento de imaxe un atributo de clase e logo de usar un estilo CSS xeral que flota o elemento é só unha forma de poder realizar esta imaxe de "imaxe aliñada á esquerda". Tamén pode sacar o valor da clase da imaxe e estilizalo con CSS escribindo un selector máis específico. Por exemplo, vexamos un exemplo onde esa imaxe está dentro dunha división cun valor de clase de "contido principal".