0

Bom, eu não sei que titulo hei-de dar a pergunta, portanto se alguém desejar editar eu aceito.

Eu tenho o seguinte esquema:

http://151.80.152.6/home.php

Pretendo fazer com a div itemsatuais, tenha aquela largura limitada, mas que as divs, que estejam por dentro, ou seja as divs item, assim que chegam ao limite de divs, que cabem dentro da div desapareçam. Ou seja suponhemos que só cabem 10 divs, lá dentro e no código estão 14. Só aparecem 10.

Como poderei fazer isso?

Meu código:

HTML:

<div class="itemsatuais">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>  
</div>

CSS:

.itemsatuais{
background-color:#263238;
width:95%;
display:flex;
justify-content:10px;
height:16%;
margin-top:8%;
margin-left:2.5%;
position:absolute;
}
.item{
width:100px;
border-style: solid;
margin-left:10px;


}

Obrigado!

2
  • Você quer que os elementos dentro da "itemsatuais" além do limite definido nem sejam adicionados? Commented 17/04/2017 às 14:29
  • Você ja utilizou overflow: hidden em .itemsatuais ? Commented 17/04/2017 às 14:31

1 Resposta 1

3

Podes acrescentar nos css:

.itemsatuais .item:nth-child(n+11) {
  display:none;
}

Basicamente estás a dizer que queres só os primeiros 10 .item visíveis

.itemsatuais{
background-color:#263238;
width:95%;
display:flex;
justify-content:10px;
height:16%;
margin-top:8%;
margin-left:2.5%;
position:absolute;
}
.item{
width:100px;
border-style: solid;
margin-left:10px;
}

.itemsatuais .item:nth-child(n+11) {
  display:none;
}
<div class="itemsatuais">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>  
</div>

Excelente resposta sobre o pseudo-seletores de posição.

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 .