css to achieve horizontal arrangement and scrolling effect of images

This article mainly introduces CSS to achieve the horizontal arrangement and scrolling effect of images. Friends who need it can refer to it. I hope it can help everyone.

The specific code is as follows:

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

Note here that the img tag cannot float left, and the outer container must be added without line breaks

white-space: nowrap;

Related recommendations:

javascript implementation of asynchronous image upload method example

How to use CSS3 image mixing

How to use CSS to create image rotation effects

The above is the detailed content of css to achieve horizontal arrangement and scrolling effect of images. For more information, please follow other related articles on the PHP Chinese website!