×
Loading ...

Como inserir duas imagens horizontalmente com HTML

Atualizado em 20 julho, 2017

No HTML, é necessário inserir imagens usando a tag 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

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.

Instruções

Inserindo imagens usando HTML e alinhando com CSS (Digital Vision./Digital Vision/Getty Images)
  1. Adicione uma tag 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:

    Loading...
  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 em uma linha, você não as colocou dentro de

    para criar parágrafos ou em uma tag
    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. 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 > que devem ser colocadas dentro das tags 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 à 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. Coloque a tag dentro de uma tag

    e atribua uma id para ela. Dê um nome único e representativo. Exemplo:

  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

    com o id "images". Assim:

    images img {float: left;}

Loading...

Dicas

  • 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.

Aviso

  • Faça sempre backup dos arquivos HTML e CSS quando for editar suas páginas.

Referências

Recursos

Loading ...
Loading ...