Skip to main content
1 de 3
Largato
  • 92,9mil
  • 18
  • 190
  • 261

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.

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

Largato
  • 92,9mil
  • 18
  • 190
  • 261