HTML - Aprenda a colocar imagens lado-a-lado

Imagem Lado-a-lado
    Olá blogueiros de todo o mundo, hoje iremos aprender como colocar imagens lado-a-lado com um código em HTML, que é muito fácil de ser ultilizado, e que é uma ótima dica para a sua página de parceiros ou de banners.

 Criei esse código após tentar colocar imagens lado-a-lado e como não havia conseguido, pensei vou criar um código que seja adequado com estilo 2x2, e foi isso que fiz.

Colocando imagens Lado-a-Lado
    Como é um código em HTML, e que você já sabe que um código dessa propriedade tem que ser colocado em uma área destinada ao suporte em HTML ou JavaScript.    Então cole o seguinte
código, em uma área destinada a suporte HTML/JavaScript:  

<a href="Link-da-imagem-1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img src="Endereço-da-imagem-1" /></a><a href="Link-da-imagem-2" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"></a><a href="Link-da-imagem-2" target="_blank"><img src="Endereço-da-imagem-2" /></a> 


<a href="Link-da-imagem-3" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img src="Endereço-da-imagem-3" /></a><a href="Link-da-imagem-4" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"></a><a href="Link-da-imagem-2" target="_blank"><img src="Endereço-da-imagem-4" /></a>
Por favor, modifique as áreas destacadas:
Em Azul - Cor da Borda
Em Vermelho - Cor do fundo

Exemplo:




Comentários

  1. Olá tudo bem ? fiz td certo so q quero botar mais de 2 imagens lado a lado tem como ?

    ResponderExcluir
    Respostas
    1. Sim. Elimine os pulos de linha do código. Deixando o código todo unido e único.

      Excluir
  2. eu editei as imagens e me pede o "href" tenho só numa pasta... posso eliminar isso ?

    ResponderExcluir
  3. eu editei as imagens e me pede o "href" tenho só numa pasta... posso eliminar isso ?

    ResponderExcluir
    Respostas
    1. Sim, neste método iremos retirar toda a "família" ' (a)'. Entretanto, use este código que eu modifiquei:

      <*img src="Endereço-da-imagem-1" /><*img src="Endereço-da-imagem-2" />

      <*img src="Endereço-da-imagem-3" /><*img src="Endereço-da-imagem-4" />

      OBS.:Retire os asteriscos do código.

      Excluir

Postar um comentário

    Comentários que contenham em seu conteúdo seguintes temas: pornografia, palavrões, palavras ofensivas ou preconceituosas, spam, todas palavras em Caps Lock, não serão aceitos.