



1) Adicionando HTML
<div class="row">
<div class="coluna">
<img src="imagem1" alt="descrição da imagem" style="width:100%">
</div>
<div class="coluna">
<img src="imagem2" alt="descrição da imagem" style="width:100%">
</div>
<div class="coluna">
<img src="imagem3" alt="descrição da imagem" style="width:100%">
</div></div>
Legenda:
Propriedade | Descrição |
---|---|
imagem | caminho URL específico da imagem |
descrição da imagem | descrição da foto, clique aqui para ler sobre importância da tag ALT |
width:100% | essa propriedade irá dizer ao site para fazer com que a imagem preencha toda a área requisitada (não é necessário editá-la) |
2) Adicionando o CSS
.coluna{
float: left;
width: 33.33%;
.row::after {
content: "";
clear: both;
display: table;
}
O valor 33.33% determina que haverá um limite de 3 imagens por linha (33,33% = 1/3), caso você queira retirar essa limitação, é só apagar toda a linha width. Caso você queira determinar outro número de imagem por linha, use a porcentagem que cada uma vai ocupar indo pela lógica de frações (1/2=50%; 1/3 = 33,33%; 1/4 = 25%; 1/5 = 20%;)2 imagens por linha = 50%
4 imagens por linha = 25%
5 imagens por linha = 20%
X imagens por linha = 1/X * 100 [%]
Copiar e colar
Para quem não quer setar o CSS fora da caixa do HTML, ou seja, quer o código para copiar, colar e usar logo:
<div class="row">
<div class="coluna">
<img src="imagem1" alt="descrição da imagem" style="width:100%">
</div>
<div class="coluna">
<img src="imagem2" alt="descrição da imagem" style="width:100%">
</div>
<div class="coluna">
<img src="imagem3" alt="descrição da imagem" style="width:100%">
</div></div>
<style>
.coluna{
float: left;
width: 33.33%;
.row::after {
content: "";
clear: both;
display: table;
}
</style>
Deixar as imagens com linkVocê só precisa por a tag <a> antes da <img> e fechá-la após a <img> acabar, por exemplo>
<div class="row">
<div class="coluna"><a href='http://url-destino'><img src=".jpg" alt="" style="width:100%"></div></a>