Isso seria muito fácil de fazer com uma linguagem server-side, mas como não foi posta essa opção na pergunta, vamos de CSS.
Nos exemplos abaixo foram usados img
e div
, mas a lógica serve para qualquer elemento.
Usando nth-child
Sempre que precisar algo que aconteça a cada n
ítens, pode usar o :nth-child
(ou outros nth
, conforme o contexto).
Veja um exemplo:
.quatro {
display:block;
float:left;
margin:10px;
}
.quatro:nth-child(4n+1) {
clear:both;
}
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
<img class="quatro" src="http://placecage.com/100/100">
Para aprender mais:
O que significam o "n", números e sinais nos seletores "nth-child" ou "nth-last-child"?
Fazer uma lista quadriculada HTML
Usando DIVs
Dependendo do efeito desejado, basta definir a largura das suas DIV
s para 25%. Só cuidado com o box-model
:
.quatro {
width:25%;
float:left;
}
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>
<div class="quatro"><img src="http://placecage.com/100/120"></div>