带垂直滚动的Div

Question

I need to implement an element with a left - right scroll effect, like this :

How can do this?

Here is my code :

<div class="populardiv">
   <div class=populart></div>
   <div class=populars></div>
   <div class=populars></div>
   <div class=populars></div>  
   <div class=populars></div>
   <div class=populars></div>   
</div>




.populardiv
{
    float:left;
    width: 100%;
    height: 35vw;
    background-color:white;
    overflow-x: scroll;        

}

.populars
{
    float:left;
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    background-color: red;
    margin-left:3vw; 

}

My output screen :

Thanks.

Answer 1

Add white-space: nowrap to the container, and then change the child elements to display: inline-block , instead of float

 .populardiv { float: left; width: 100%; height: 35vw; background-color: white; overflow-x: scroll; white-space: nowrap; } .populars { display: inline-block; width: 20vw; height: 20vw; border-radius: 50%; background-color: red; margin-left: 3vw; } 

 <div class="populardiv"> <div class=populart></div> <div class=populars></div> <div class=populars></div> <div class=populars></div> <div class=populars></div> <div class=populars></div> </div> 

Answer 2

Here is a solution :

<div class="populardiv">
   <div class=populart></div>
   <div class=populars></div>
   <div class=populars></div>
   <div class=populars></div>  
   <div class=populars></div>
   <div class=populars></div>   
</div>


<style>
.populardiv
{
   height: 35vw;
   background-color:white;
   overflow: auto;
   white-space: nowrap;
}

.populars
{
   width: 20vw;
   height: 20vw;
   border-radius: 50%;
   background-color: red;
   margin-left:3vw; 
   display: inline-block;
}
</style>

JSFiddle here