Como alinhar três imagens próximas uma a outra em HTML

Escrito por foye robinson | Traduzido por ronaldo rocha borges
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como alinhar três imagens próximas uma a outra em HTML
Saiba como alinhar imagens próximas uma a outra utilizando os seguintes procedimentos (Dynamic Graphics/Dynamic Graphics Group/Getty Images)

Ao adicionar imagens em seu site na rede, elas nem sempre ficam alinhadas onde você as quer. Elas podem ir para outra linha, ou ao lado do texto. Quanto mais imagens você tiver em uma única linha, menos espaço você terá. É melhor verificar o seu layout no navegador, mesmo se ele parecer estar bom no seu editor de rede. Você pode fazer as imagens flutuarem ao lado da outro ao modificar seu HTML. A propriedade "float:left" (flutuar:esquerda) permite que você mova elementos para o lado esquerdo de uma página na rede.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Inicie um editor de texto, como o Bloco de Notas, TextPad ou WordPad. Selecione "Arquivo" e "Abrir" no menu. Encontre e dê um duplo clique no arquivo HTML que você deseja modificar.

  2. 2

    Adicione o seguinte código entre a tag HEAD da sua página. O código atual dá a cada imagem uma largura de 33%. Para alterar a largura, mude "33%" para um valor diferente, como as dimensões de sua imagem. O código "Padding-right:5px;", acrescenta um espaçamento de cinco pixels para a direita de cada imagem. Para usar um espaçamento diferente, mude "5px;" para um número diferente. Para adicionar preenchimento à esquerda da imagem, mude "padding-right" (direita) para "padding-left" (esquerda).

    <style type="text/css"> <! - img.left {float: left; padding-right: 5px; width: 33%; } img.middle {float: left; padding-right: 5px; width: 33%; } img.right {float: left; padding-right: 5px; width: 33%; } -> </ style>

  3. 3

    Adicione o seguinte código entre a tag <BODY> onde você deseja que as três imagens sejam posicionadas. Substitua "leftimage.gif", "middleimage.gif" e "rightimage.gif" com os nomes de suas imagens.

    <div> <img src="leftimage.gif" class="left" alt="image description" /> <img src="middleimage.gif" class="middle" alt="image description" /> <img src="rightimage.gif" class="right" alt="image description" /> </div>

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