Como inserir duas imagens horizontalmente com HTML

Escrito por sara williams | Traduzido por weber figueiredo
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como inserir duas imagens horizontalmente com HTML
Inserindo imagens usando HTML e alinhando com CSS (Digital Vision./Digital Vision/Getty Images)

No HTML, é necessário inserir imagens usando a tag <img> e aplicar estilos usando código CSS (Cascading Style Sheet). Você pode alinhar imagens em uma linha horizontal "flutuando" elas, mas é necessário mantê-las flutuantes sem quebrar os layouts da página web. Usar uma tag <div> em torno das imagens as força a ficar num determinado lugar. Depois de alinhá-las, utilize CSS para adicionar espaçamento e outros efeitos. Esta técnica é bastante útil para a criação de páginas com galeria de imagens.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Adicione uma tag <img> para cada imagem em seu documento HTML. Coloque cada uma delas numa linha, deixando uma abaixo da outra. Use o atributo "src" para definir o caminho do arquivo (o endereço web) para cada imagem, assim:

    <img src="caminho/image1.png"> <img src="caminho/image2.png">

  2. 2

    Salve o código HTML e teste no navegador. Se você usa um servidor, não esqueça de fazer o upload tanto do arquivo HTML quanto das duas imagens. Ambas já devem se alinhar lado a lado. Isso acontece porque, apesar de você colocar cada tag <img> em uma linha, você não as colocou dentro de <p> para criar parágrafos ou em uma tag <br/> para quebrar linhas. Pode acontecer de as imagens não ficarem lado a lado. Neste caso,você também vai precisar fazer o espaçamento das imagens no CSS.

  3. 3

    Edite o CSS da sua página para garantir que as imagens sempre fiquem alinhadas horizontalmente. Adicione o código num arquivo .CSS externo, ou entre as tags <style> que devem ser colocadas dentro das tags <head> no início do documento HTML. Veja o exemplo no código abaixo:

    img {float: left; margin-right: 10px; margin-bottom: 10px;}

    O código acima "flutua" cada instância da tag <img> à esquerda de tudo o que está ao lado da página. Qualquer coisa do lado direito de um elemento "flutuado" para a esquerda ficará em torno dele. Adicione espaçamentos ou margens para trabalhar com o espaço entre as imagens.

  4. 4

    Coloque a tag <img> dentro de uma tag <div> e atribua uma id para ela. Dê um nome único e representativo. Exemplo:

    <div id="imagens"> <img src="caminho/image1.png" /> <img src="caminho/image2.png" /> </div>

  5. 5

    Escreva o seguinte código CSS para manter suas imagens "flutuando" sobre outros conteúdos:

    images {clear: both;}

    Você também pode mudar o seu código CSS para flutuar apenas as imagens encontradas entre a <div> com o id "images". Assim:

    images img {float: left;}

Dicas & Advertências

  • Aprenda tudo sobre o modelo CSS de caixas para entender melhor como posicionar imagens, texto e outros elementos em suas páginas web. Ele descreve como os tamanhos e bordas das imagens no HTML são calculados pelos navegadores.
  • Faça sempre backup dos arquivos HTML e CSS quando for editar suas páginas.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível