I tried css code in google and find none for a long time. I can do this by javascript,
Get the body/parent div's width and height, then place div and hide remaining
or
By div * nos and add this value to parent div's width and stop overflow.
I think this trick can be done using css3. If you achieved this by css3, pls post your code.
My Question demo will be something like this.
<div id="parent">
<div class="small s1">some thing</div>
<div class="small s2">some thing</div>
<div class="small s3">some thing</div>
<div class="small s4">some thing</div>
</div>
In this parent will have 500px width and height 500px; class small will have 300px width and 100px height;
If i apply float for class small i can see this in next line.
I need to show only 2 small div, and the second div must show only 200px and 100px hidden. also s3 and s4 must be hidden.
IMPORTANT parent div will be a dynamic value.
I suggest that you try playing around with display: inline-block and white-space: nowrap which I believe would achieve what you are looking for.
For maximum compatibility with IE7 and below, you should however replace the .small divs with spans.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments