Div垂直滚动

Question

我需要实现一个左右滚动效果的元素，如下所示：

怎么做呢？

这是我的代码：

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

}

我的输出屏幕：

感谢。

Answer 1

将white-space: nowrap添加到容器中，然后将子元素更改为display: inline-block，而不是float

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是一个解决方案：

<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