Tag <p></p> com imagem à direita

[Digicold]

Olá a todos,

preciso de uma ajuda urgentíssima em uma questão até de certo modo boba, porém que não consegui resolver.

tenho a seguinte estrutura:

<p>

texto que por ventura pode quebrar automaticamente

<img src="nome_da_img"/>

</p>

o que eu preciso é o seguinte:

1º. que a imagem sempre fique a direta do texto, mas que não encoste na margem direita do objeto pai, onde este <p> se encontra;

2º. quando houver quebra automática, que a imagem continue a direita do texto, porém que sempre fique encostada ao texto e não ser jogada para a margem direita do objeto pai.

espero ter sido o mais claro possive, pois tenho este trabalho para terminar o quanto antes, e infelizmente não pude encontrar uma solução, agradeço desde já, obrigado.

[Markus Magnus]

Uma maneira que funciona é essa:

<style>
span {
	float:left;
}
img {
	float:left;
}
.clear {
	clear:both;
}
</style>
<p>
	<span>
		Blá blá blá blá blá
	</span>
	<img src="blá.jpg" />
	<br class="clear" />
</p>

Uso dois float:left para fazer o texto e a imagem ficarem alinhados a esquerda, você pode por um max-width em span para dar um tamanho máximo para a tag, porque sem isso quando houver uma quebra de linha quer dizer que o texto chegou ao máximo da linha e a imagem ficará colada ao canto direito, o clear:both serve para que a tag p continue "envolvendo" todo o span e img não quebrando o seu layout.

Espero ter ajudado.

Tudo de bom.

Editado Janeiro 27, 2014 por Markus Magnus

[Digicold]

Agradeço muito sua atenção Markus, já vou testar aqui e posto como foi o desenvolvimento, obrigado.

[Digicold]

Olá Markus, muito agradecido por seu tempo e apoio, graças ao seu conhecimento, consegui adaptar sua dia ao que eu precisava e com exito.

Obrigado mesmo, abraço.

[Markus Magnus]

Não tem de que.

Estamos aqui para ajudarmos uns aos outros.

Toda vez que eu respondo algo também tenho que pesquisar e testar e sempre aprendo no processo.