Image with text

Asked

Viewed 74 times

4

I wanted to do something like this:

inserir a descrição da imagem aqui

The square is an image. I tried to do with table but it doesn’t look like this.

2 answers

4

This is what you want?

<img src="http://i.stack.imgur.com/A2VV7.png" align="right">
exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo 
exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo
exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo
exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo 
exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo
exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo 
exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo
exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo 
exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo
exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo 
exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo

As you know in HTML5 many attributes are not supported and you should use CSS to see an example with CSS see the @Kaduamaral response.

  • 1

    Jorge, the attribute align is discontinued in HTML5... Put a note. ;)

4

In HTML5 this is done using the property float in the image, along with the text.

p{text-align:justify;}
.imagem-direita{
 float:right;
  margin: 0 0 5px 5px;
}

.imagem-esquerda{
 float:left;
  margin: 0 5px 5px 0;
}
<p>
<img style="background-color:#333; width:200px; height:200px;" class="imagem-direita">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ea, tenetur sint, deleniti dolor aspernatur sunt ab laborum quasi, non voluptatibus at laudantium consequuntur cupiditate minus ut quia. Eveniet, sapiente.</span>
<span>Impedit ratione, repellat culpa reiciendis esse ipsa. Cumque iusto doloribus quidem pariatur perspiciatis quod id qui labore a autem accusamus, aspernatur cum odit vero, quisquam beatae saepe ratione dignissimos itaque.</span>
<span>Debitis, error tenetur ad est incidunt quod perspiciatis odio, nostrum dolore laudantium dolorum, possimus nulla temporibus perferendis laboriosam ipsam hic. Debitis molestias, deleniti. Voluptas illum quis totam eos esse, porro.</span>
<span>Fugiat quae in quisquam! Amet eos consequuntur provident distinctio molestias corporis voluptates ut quam atque. Possimus sequi eveniet, alias quae omnis, architecto temporibus exercitationem, at, accusantium quidem veniam ipsum. Saepe!</span>
<span>Debitis dolores qui, iusto blanditiis deserunt saepe sit, veniam minus perferendis officia, quasi nulla in alias id assumenda suscipit dolorem repellendus laudantium eligendi ipsum. Totam quas, ipsum ex obcaecati recusandae.</span>
</p>
<p>
<img style="background-color:#333; width:200px; height:200px;" class="imagem-esquerda">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ea, tenetur sint, deleniti dolor aspernatur sunt ab laborum quasi, non voluptatibus at laudantium consequuntur cupiditate minus ut quia. Eveniet, sapiente.</span>
<span>Impedit ratione, repellat culpa reiciendis esse ipsa. Cumque iusto doloribus quidem pariatur perspiciatis quod id qui labore a autem accusamus, aspernatur cum odit vero, quisquam beatae saepe ratione dignissimos itaque.</span>
<span>Debitis, error tenetur ad est incidunt quod perspiciatis odio, nostrum dolore laudantium dolorum, possimus nulla temporibus perferendis laboriosam ipsam hic. Debitis molestias, deleniti. Voluptas illum quis totam eos esse, porro.</span>
<span>Fugiat quae in quisquam! Amet eos consequuntur provident distinctio molestias corporis voluptates ut quam atque. Possimus sequi eveniet, alias quae omnis, architecto temporibus exercitationem, at, accusantium quidem veniam ipsum. Saepe!</span>
<span>Debitis dolores qui, iusto blanditiis deserunt saepe sit, veniam minus perferendis officia, quasi nulla in alias id assumenda suscipit dolorem repellendus laudantium eligendi ipsum. Totam quas, ipsum ex obcaecati recusandae.</span>
</p>


If you are not using HTML5, you can do it in a simpler way using the attribute align tag img, see reply to @Jorgeb.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.