2

inserir a descrição da imagem aqui

Estou tentando colocar uma imagem e um texto do lado, mas não estou conseguindo. O texto fica embaixo da foto ou eu consigo colocar a primeira frase do texto no mesmo nível que o topo da imagem da esquerda.

Tentei usar o display:block, até certo ponto funciona, porquê fica do lado da imagem, mas fica como coluna.

Não fica igual o da imagem acima, com o texto embaixo da foto.

<div>

   <img width="186" height="186" />
   Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

</div>

Minha estrutura é igual a essa acima. A imagem tem 186px de largura.

Sem CSS, só HTML achei que funcionava.

Exemplo:

http://jsfiddle.net/9r3d8hs2/

0

3 Respostas 3

8

Veja se é isso que você quer:

<table>
  <tr>
    <td><img  width="300" height="150" src='https://i.sstatic.net/dioLI.png'/></td>
    
    <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </br>
Phasellus bibendum aliquet erat, ut ornare purus malesuada et.</td> 
  </tr>
 
</table>

1
  • É isso mesmo. Mas sem table, pelo amor de Deus. Rsrs. Mas acho que já consegui aqui... Commented 9/10/2015 às 16:44
7

Você deve colocar a imagem dentro de um <p>/<div> e usar um elemento align na tag <img>.

Ficaria assim:

<div>
   <img align="left">
   Lorem Ipsum
</div>
8
  • Se quiser, pode trocar o left por right, middle, top ou bottom. Mais que isso, só pelo CSS Commented 9/10/2015 às 16:46
  • E como eu dou espaço no texto ? Porquê está grudado. jsfiddle.net/9r3d8hs2 Commented 9/10/2015 às 16:48
  • 2
    Uma observação: align não é suportado no HTML5, se estiver usando uma versão anterior está ok. Commented 9/10/2015 às 16:54
  • Ajusta um margin-right e margin-bottom pra img no CSS que resolve Commented 9/10/2015 às 16:54
  • Ou adiciona com elemento style, se for só pra uma imagem Commented 9/10/2015 às 16:54
7

Consegui, fiz dessa forma.

Coloquei essa propriedade na imagem e funcionou.

img.face{
    float: left;
    border: transparent thin solid;
    padding: 5px;
    margin: 0px 10px 10px 0;
    max-width: 186px;
}
1
  • Na verdade me deu um branco feio... isso é muito básico. Commented 9/10/2015 às 16:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .