5

Eu não entendo muito de CSS e nem de HTML, porém estava montando meu site e me deparei com o seguinte problema:

Tamanho normal da janela 1366x768

Na imagem acima da pra ver que todas as thumbnails estão dispostas e perfeitamente alinhadas.

Imagem com browser redimensionado Quando eu redimensiono a janela fica um espaço na lateral. Eu queria saber como preencher esse espaço com alterando apenas o 'margin' dos thumbnails para deixa-los mais espaçados até preencher tudo.

HTML:

<div class="anime-item">
    <a href="/anime/1/">
        <img class="img-anime-thumb" src="" />
        <div class="anime-caption">Nome</div>
    </a>
</div>

CSS:

.anime-item {
    float:left;
    margin:15px;
    box-shadow:2px 2px 5px rgba(31,31,31,.8);
}
0

3 Respostas 3

2

O melhor para esse caso, de exibir um catalogo (uma lista de itens qualquer) é utilizar o padrão de listas do HTML.

Fica semanticamente correto, facilita para ferramentas de leitura de páginas web para deficientes visuais, facilita a navegação da página usando apenas o teclado e ajuda o google a indexar o conteúdo da sua página para melhorar o resultado da sua páginas nos sites de buscas em geral (princípios de SEO).

Aqui vai um exemplo de como você pode fazer isso.

* {
  box-sizing: border-box
}
.anime-item {
  width: 140px;
  height: 280px;
  background-color: red;
  box-shadow: 2px 2px 5px rgba(31, 31, 31, .8);
}
ul.catalogo {
  list-style: none;
  padding: 0px;
  text-align: center;
}
ul.catalogo > li {
  display: inline-block;
  margin: 10px 15px;
}
<ul class='catalogo'>
  <li class='anime-item'>
    <a href="/anime/1/">
      <img class="img-anime-thumb" src="" />
      <div class="anime-caption">Nome</div>
    </a>
  </li>

  <li class='anime-item'>
    <a href="/anime/1/">
      <img class="img-anime-thumb" src="" />
      <div class="anime-caption">Nome</div>
    </a>
  </li>

  <li class='anime-item'>
    <a href="/anime/1/">
      <img class="img-anime-thumb" src="" />
      <div class="anime-caption">Nome</div>
    </a>
  </li>

  <li class='anime-item'>
    <a href="/anime/1/">
      <img class="img-anime-thumb" src="" />
      <div class="anime-caption">Nome</div>
    </a>
  </li>

  <li class='anime-item'>
    <a href="/anime/1/">
      <img class="img-anime-thumb" src="" />
      <div class="anime-caption">Nome</div>
    </a>
  </li>
</ul>

Espero ter ajudado.

2

Paulo, tenho 2 soluções para você:

1º Centralizar os itens:

Primeiramente utilizaremos li para cada item no exemplo, é mais semântico e também facilita pois teremos que adicionar o attr text-align center para a ul.

Ex:

ul {
  display: block;
  text-align: center;
}
li {
  background-color: rgb(201, 225, 222);
  display: inline-block;
  height: 180px;
  width: 120px;
}
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

Explicação: isso faz com que os elementos apenas fiquem alinhados ao meio.

2º Centralizando e gerando espaço entre os itens:

Para esse exemplo irei incrementar o exemplo acima.. Você utilizara a li para delimitar a quantidade de itens por linha e centralizara as thumb dentro desse container.

Ex.:

/*resets*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


ul {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
}
li {
  background-color: white;
  display: inline-block;
  min-width: 24.5%;
}
img {
  background-color: rgb(201, 225, 222);
  height: 180px;
  margin: 10px auto;
  width: 120px;
}
<ul>
  <li>
    <img src="#" alt="item 1">
  </li>
  <li>
    <img src="#" alt="item 2">
  </li>
  <li>
    <img src="#" alt="item 3">
  </li>
  <li>
    <img src="#" alt="item 4">
  </li>
</ul>

Explicação:

  • Delimitei que seria 4 itens por coluna pois cada li possui min-width de 24.5%.

Obs.: se delimitar as li com 25% você vera que um dos elementos deve quebrar abaixo, isso se deve a renderização do navegador, pois ele considera alem dos 25% dos elementos alguns outros elementos como por exemplo a scroll bar que somam mais que 100% e isso gera a quebra, ou seja, te aconselho a utilizar um pouco abaixo desse valor, como por exemplo 24.5%.

  • Alinha as thumb dentro da li com margin 0 auto;

  • Para outras quebras no responsivo você pode utilizar media query, por exemplo para 2 itens por coluna você usa min-width de 50% (use 49%). Exemplos de Media query.

Há também outras soluções como flexbox, display table... Mas te aconselho a utilizar essas, pois são as mais fáceis e compatíveis com os navegadores utilizados hoje. Espero ter ajudado, qualquer duvida pode comentar.. Valeu!

0

<div class="anime-item">, nesse elemento coloca:

position: relative;
margin: auto;

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 .