How to limit the size of a div

Navigation
0

Well, I do not know what title I'm going to give the question to, so if anyone wants to edit I'll accept it.

I have the following scheme:

link

I want to do with the div itemsatuais, have that limited width, but that the divs, that are inside, ie the divs item, as soon as they reach the limit of divs, that fit inside the div disappear. That is, suppose that only 10 divs fit, inside and in the code are 14. Only 10 appear.

How can I do this?

My code:

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;


}

Thank you!

    
asked by anonymous 17.04.2017 / 16:24

1 answer

3

You can add in css: 

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

You're basically saying that you want only the first 10% visible% 

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

Excellent answer over the pseudo position selectors.

    
17.04.2017 / 16:38
How to start Accordion closed how to change the class of an element according to the position of the values inside a foreach?