CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

Cascading Style Sheets (CSS) - Posicionar texto ao redor de imagens

Por Benedito Silva Júnior - publicado em 11/08/2016


No passado, o posicionamento de texto ao redor de imagens era feito através do uso de tabelas, onde a imagem e textos eram colocados em células vizinhas. Hoje usamos CSS para realizar esse mesmo trabalho.

Veja o exemplo abaixo:

Código HTML:

<img src="imagem.jpg" alt="Criandobits" /> <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>

Código CSS:

img { float:left; margin:0 10px 10px 0; }

No código CSS acima definimos "float:left" para que a imagem fique alinhada a esquerda e o texto flua a direita. Para que o texto não fique colado na imagem, definimos valores para "margin".

Se você deseja que a imagem fique a direita do texto, defina "float: right". 

 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo