次の行に行くのではなく、divコンテナのイメージをオーバーフローさせます

Question

私はoverflow: autoと最大の高さと幅を持つコンテナを持っています。コンテナには画像があります。余白を取り除くために、それらをすべて1行に置き、水平マージンを取り除き、float: leftを追加して垂直マージンを削除しました。

問題は、オーバーフローして水平スクロールバーを追加する代わりに、すべての画像が1行にあるにもかかわらず、別の画像を配置する余地がない場合でも、画像が次の行に移動するということです。行が多すぎると、垂直スクロールバーが表示されます。

イメージを強制的に1行にとどめ、指定した次のイメージに移動するにはどうすればよいですか？

Answer 1

最近これも遭遇しました。コンテンツのサイドスクロールオーバーフローのために、これらのプロパティ/属性のペアをCSSで定義する必要があると思います。ここでは、テキストを使用した例は、ですが、それが役に立てば幸い：

.item-class {  
 
    overflow-y: hidden; 
 
    overflow-x: scroll; 
 
    white-space: nowrap; 
 
    margin: 0, 10px, 0, 10px; 
 
}

<div class="item-class"> 
 
    <img src="https://static.pexels.com/photos/700447/pexels-photo-700447.jpeg" alt="Num1" height="300" width="300"> 
 
    <img src="https://static.pexels.com/photos/700448/pexels-photo-700448.jpeg" alt="Num2" height="300" width="300"> 
 
    <img src="https://static.pexels.com/photos/700450/pexels-photo-700450.jpeg" alt="Num3" height="300" width="400"> 
 
    <img src="https://static.pexels.com/photos/700420/pexels-photo-700420.jpeg" alt="Num4" height="300" width="500"> 
 
</div>

編集：はdiv要素内に含まれ、それはまたイメージで動作することを示すために、例の写真を使用

Answer 2

あなたがすべき別のdivにイメージを置き、空白のプロパティを "nowrap"と指定します。

<div id="ImageContainer" style="height:300px; white-space: nowrap;"> 
 
    <!-- I only adjusted the img sizes to fit this example. 
 
     --> 
 
     <img src="https://static.pexels.com/photos/700447/pexels-photo-700447.jpeg" alt="Num1" height="300" width="300"> 
 
     <img src="https://static.pexels.com/photos/700448/pexels-photo-700448.jpeg" alt="Num2" height="300" width="300"> 
 
     <img src="https://static.pexels.com/photos/700450/pexels-photo-700450.jpeg" alt="Num3" height="300" width="400"> 
 
     <img src="https://static.pexels.com/photos/700420/pexels-photo-700420.jpeg" alt="Num4" height="300" width="500"> 
 

 
    </div>

`