![](https://1.bp.blogspot.com/-7AG_w5sQaaM/WtzrDNMd9NI/AAAAAAAAGfs/WKlbTgVYNpwIRPAGV5NB9jVW9cmR5oLqACLcBGAs/s1600/cubo-pattern.png)
Exemplo
![Imagem 1: Logo Amotrix preta](https://1.bp.blogspot.com/-cyQ8KRoAbHg/WtzlHwffOTI/AAAAAAAAGfY/1Yw1Itw7kzkJHtyUajbAfCG4hpqqetXqgCLcBGAs/s1600/amotrix-000-196x.png)
![Imagem 2: Logo Amotrix turquesa](https://3.bp.blogspot.com/-bAefW81LAdo/WtzlH-neq-I/AAAAAAAAGfU/BLSdlHw8Rpc4G1KtiGEB5ybOiUTW406ywCLcBGAs/s1600/amotrix-31c8a6-196x.png)
![Imagem 3: Logo Amotrix Carmesim](https://2.bp.blogspot.com/-NJ_nQ4Hqz18/WtzlH80EG6I/AAAAAAAAGfQ/UT5nbI3QCs0ZsVF69nJWbJ7TtnnSRGgsACLcBGAs/s1600/amotrix-c83147-196x.png)
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 [%]
3) Deixando responsivo
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
Faz as três colunas se empilharem de forma distribuídas umas sobre as outras.
O valor
500px
determina que a partir das telas com valores iguais ou menos que 500px, as
images irão se empilhar, você pode alterar esse valor de acordo com a sua
necessidade.
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>
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
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>