画像の水平配置とスクロール効果を実現するCSS

この記事では主に画像の水平方向の配置とスクロール効果を実現するための CSS を紹介します。必要な方はぜひ参考にしてください。

具体的なコードは次のとおりです:

.imageList{
        overflow-x: auto;
        overflow-y: hidden;
        height:180px;
        white-space: nowrap;
      img{
        width:auto;
        height:100%;
        margin-right:10px;
      }
 }

<p class="imageList">
    <img src="1.jpg"/>
    <img src="2.jpg"/>
    <img src="3.jpg"/>
    <img src="4.jpg"/>
    <img src="1.jpg"/>
</p>

ここで、imgタグをフローティングのままにすることはできず、外部コンテナは改行なしで追加する必要があることに注意してください

white-space: nowrap;

関連する推奨事項:

非同期画像アップロードメソッドの JavaScript 実装の例

CSS3 画像混合の使用方法

CSS を使用して画像回転効果を作成する方法

以上が画像の水平配置とスクロール効果を実現するCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。