imagem do lado do texto

Rosa Pereira · 7 de fevereiro de 2017

Pessoal,
estou precisando de uma ajudinha. eu estou fazendo um codigo em html e css. Quero colocar a imagem do lado do texto.. porém não esto conseguindo. Vou deixar um pedaço do meu código aqui em baixo, quem puder me ajudar, fico agradecida!

<!DOCTYPE html>

<html>
<head>
<title> Contatos </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta charset="utf-8">
</head>

<body>



<h1> Contatos </h1>

<div classe="conteudo">
<div classe="imagem">
<img src="phone.jpg" width:"20px"; height="20px" />
</div>

<div classe="texto">
<p> <b>CENTRAL DE ATENDIMENTO:</b><br>21 2505 1500</p>
</div>
</div>
<br>
<p><b>ENDEREÇO</b><br>
Av. Pastor Martin Luther King Junior, 126 - Del Castilho, Rio de Janeiro - RJ, loja F01, 1º piso<br><br>
v. Maracanã, 987 - Tijuca, Rio de Janeiro - RJ, loja F06, 1º piso<br><br>
Rua Fonseca, 240 - Bangu, Rio de Janeiro - RJ, loja I02 - 2º piso<br><br>
Rod. Washington Luíz, 2895 - Parque Duque, Duque de Caxias - RJ, loja E06, 2º piso<br><br>
Praia de Botafogo, 400 - Botafogo, Rio de Janeiro - RJ, loja F02, 3º piso<br><br>
Estr. do Mendanha, 555 - Campo Grande, Rio de Janeiro - RJ, loja F03, 1º piso<br><br>

<br>
</p><br>

<p><b>FUNCIONAMENTO GERAL:</b><br>
De 2ª à 6ª feira: de 09:00 às 21:00h<br>
Sábados e feriados: de 09:00 às 18:00h</p><br><br>

<p><b>FORMAS DE PAGAMENTO</b><br>
Bandeiras: VISA • MASTER • AMEX • DINERS (Crédito e Débito)<br>
Tickets Refeição: ELO • GREENCARD • PLANVALE • SODEXO • TR<br>
<b>NÃO ACEITAMOS CHEQUE</b></p><br>


</body>

</html>

---------------(dois arquivos)

body{
background-color: orange;
}

h1{
color: #FF0000;
}


.conteudo{
display: table;
}

.imagem{
display: table-cell;
float: left; 
}

.texto{
display: table-cell;
}

DiF · 7 de fevereiro de 2017

@Rosa Pereira Olá, seja bem vinda em nosso Clube do Hardware.

Se eu entendi, você quer colocar uma imagem de telefone do lado do número de telefone.. certo?

Basta colocar a imagem dentro do <p> de onde está o telefone.

Assim:

<div classe="texto">
<p> <b>CENTRAL DE ATENDIMENTO:</b></p>
  <p>
  <img src="phone.jpg" />
  21 2505 1500
  </p>
</div>

Veja que eu coloquei mais outro <p> um para o central e outro para o telefone.. a imagem vai dentro desta.

No css, apenas defini o tamanho da image. não precisa declarar display table-cell e nem float left.

Veja o exemplo: https://jsfiddle.net/gztaL4ta/

Entrar

imagem do lado do texto

Posts recomendados

Rosa Pereira

DiF

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos