本部

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

のは、ソリューションです：

<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

Answer 2

コンテナにwhite-space: nowrapを追加し、display: inline-blockに子要素を変更する代わりに、ここで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>