Image with text

Navigation
4

I wanted to do something like this:

The square is an image. I tried to do with table but it does not stay that way.

    
asked by anonymous 29.04.2015 / 16:46

2 answers

4

Is this 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 response of @KaduAmaral.

    
29.04.2015 / 16:53
4

In HTML5 this is done using the float property 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're not using HTML5, you can do it in a simpler way, using the align attribute of the img tag, see @JorgeB's answer.

    
29.04.2015 / 16:55
Copy bank record Two-dimensional Array