1

Eu quero colocar uma fileira de 4 imagens com um texto pequeno em baixo de cada imagem, isso eu já sei fazer, mas eu tenho muitas imagem e preciso que cada fileira tenha o maximo de 4 imagens.

Eu tentei fazer isso usando 4 li dentro de 1 ul, e usando display flex, deu certo, mas eu preciso ficar editando o conteudo. Então eu preciso saber como colocar um limite de 4 imagens por fileira.

Olha o exemplo:

inserir a descrição da imagem aqui

Edit:

Meu script:

<article>
  <div>
    <ul>
      <li>
        <a><img></a>
        <h4><a></a></h4>
        <h5><a></a></h5>
      </li>

Edit 2:

inserir a descrição da imagem aqui

3 Respostas 3

5

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 DIVs 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>

3
  • Vc realmente conseguiu colocar um limite de 4 imagens por linha. Mas eu tentei aplicar esse seu código no meu e n consegui. Eu atualizei a minha pergunta com um exemplo do código que tenho. Essa li do meu código se repete variaz vezes dentro da ul
    – jim
    Commented 25/08/2018 às 21:19
  • O elemento pode ser qualquer um, usei IMG e DIV como mero exemplo. Basta colocar a classe "quatro" (ou o nome que vc quiser) no elemento desejado. Obviamente que você deve começar de um CSS limpo, para que suas regras atuais não atrapalhem o efeito (que foi comprovado nos exemplos executáveis acima). Se tentar misturar com resto de CSS anterior, aí fica dificil detectar o problema.
    – Largato
    Commented 25/08/2018 às 21:21
  • veja funcionando com seu codigo: codepen.io/anon/pen/yxeEpB
    – Largato
    Commented 25/08/2018 às 21:24
4

Pode fazer desta forma, dividindo a largura total da ul por 4 (25%). Demais explicações no código.

No caso, não usei float: left, o que não é recomendado, porque irá impedir que a área da ul se expanda com o conteúdo.

body{ /* só para exemplo, elimina espaçamento do body a seta um fundo escuro*/
   margin: 0;
   background-color: #444;
   font-size: 16px;
}

article ul{
   font-size: 0; /* elimina espaços entre as li */
   background-color: #fff; /* fundo branco na ul, se for preciso */

}

article ul li img{
   width: 100%; /* ajusta a largura da imagem dentro da li */
   display: block; /* convertendo para block elimina espaço natural abaixo da imagem */
}

article ul, article ul li{ /* remove espaços e o bullet da ul e das li */
   list-style: none;
   margin: 0;
   padding: 0;
}

article ul li{
   display: inline-block;
   width: 25%; /* divide a largura por 4 */
   box-sizing: border-box; /* restringe o padding à área da li */
   text-align: center; /* centraliza o conteúdo */
   padding: 15px; /* espaçamento interno entre o conteúdo e a borda da li */
   font-size: 16px; /* ajusta o tamanho da fonte nas li com o tamanho padrão */
   vertical-align: top; /* alinha as li no topo da linha */
}
<article>
   <ul>
      <li>
         <a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></a>
         <h4><a href="#">Texto texto texto texto</a></h4>
         <h5><a href="#">Texto texto texto texto</a></h5>
      </li>
      <li>
         <a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></a>
         <h4><a href="#">Texto texto texto texto</a></h4>
         <h5><a href="#">Texto texto texto texto</a></h5>
      </li>
      <li>
         <a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></a>
         <h4><a href="#">Texto texto texto texto</a></h4>
         <h5><a href="#">Texto texto texto texto</a></h5>
      </li>
      <li>
         <a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></a>
         <h4><a href="#">Texto texto texto texto</a></h4>
         <h5><a href="#">Texto texto texto texto</a></h5>
      </li>
      <li>
         <a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></a>
         <h4><a href="#">Texto texto texto texto</a></h4>
         <h5><a href="#">Texto texto texto texto</a></h5>
      </li>
      <li>
         <a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></a>
         <h4><a href="#">Texto texto texto texto</a></h4>
         <h5><a href="#">Texto texto texto texto</a></h5>
      </li>
      <li>
         <a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></a>
         <h4><a href="#">Texto texto texto texto</a></h4>
         <h5><a href="#">Texto texto texto texto</a></h5>
      </li>
      <li>
         <a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></a>
         <h4><a href="#">Texto texto texto texto</a></h4>
         <h5><a href="#">Texto texto texto texto</a></h5>
      </li>
   </ul>
</article>

4
  • Eu consegui colocar o limite de 4 imagens por linha. Mas o texto está alinhado no bottom. Eu atualizei a pergunta colando um print.
    – jim
    Commented 25/08/2018 às 22:52
  • Verdade. Faltou um vertical-align: top; nas lis
    – Sam
    Commented 25/08/2018 às 23:04
  • Coloque no article ul li{.
    – Sam
    Commented 25/08/2018 às 23:04
  • Consegui, muito obrigado colega!
    – jim
    Commented 25/08/2018 às 23:16
2

Outra forma de fazer é usando display:grid vc pode determinar a quebra a quado 4 dessa forma repeat(4, 1fr). Se for usar esse exemplo sugiro que de uma estudada no Grid para entender melhor como usa-lo de forma prática.

Aqui vc pode consultar o suporte dos browser https://caniuse.com/#feat=css-grid funciona parcialmente do IE 10 para frente usando o prefixo -ms-.

Veja o exemplo prático.

.wrap {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
}
<div class="wrap">
  <div class="box">
    <a href="#"><img src="https://fillmurray.com/100/100" alt=""></a>
    <h4><a href="#">Título</a></h4>
    <h5><a href="#">Lorem, ipsum dolor.</a></h5>
  </div>
  <div class="box">
    <a href="#"><img src="https://fillmurray.com/100/100" alt=""></a>
    <h4><a href="#">Título</a></h4>
    <h5><a href="#">Lorem, ipsum dolor.</a></h5>
  </div>
  <div class="box">
    <a href="#"><img src="https://fillmurray.com/100/100" alt=""></a>
    <h4><a href="#">Título</a></h4>
    <h5><a href="#">Lorem, ipsum dolor.</a></h5>
  </div>
  <div class="box">
    <a href="#"><img src="https://fillmurray.com/100/100" alt=""></a>
    <h4><a href="#">Título</a></h4>
    <h5><a href="#">Lorem, ipsum dolor.</a></h5>
  </div>
  <div class="box">
    <a href="#"><img src="https://fillmurray.com/100/100" alt=""></a>
    <h4><a href="#">Título</a></h4>
    <h5><a href="#">Lorem, ipsum dolor.</a></h5>
  </div>
</div>

Imagem inspecionando o Grid pelo Chrome DevTools

inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .