How to limit the size of a div

Asked

Viewed 4,380 times

0

Well, I don’t know what title to ask, so if anyone wishes to edit I accept.

I have the following scheme:

http://151.80.152. 6/home.php

I intend to do with the div itemsatual, have that limited width, but that the Divs, that are inside, ie the Divs item, once they reach the limit of Divs, that fit inside the div disappear. In other words, suppose there are only 10 Ivs, inside and in the code there are 14. There are only 10.

How can I do that?

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!

html css

  • You want the elements within the "itemsactual" beyond the defined limit or to be added?

  • Have you used overflow: hidden in .itemsatuais ?

1 answer

3


You can add in css:

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

You’re basically saying you only want the first 10 .item 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 response on the pseudo-position selectors.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.