CSS, um eine horizontale Anordnung und einen Scrolleffekt von Bildern zu erzielen

In diesem Artikel wird hauptsächlich CSS vorgestellt, um die horizontale Anordnung und den Scrolleffekt von Bildern zu erzielen. Ich hoffe, es kann allen helfen.

Der spezifische Code lautet wie folgt:

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

Beachten Sie hier, dass das img-Tag nicht nach links schweben kann und der äußere Container ohne Zeilenumbrüche hinzugefügt werden muss

white-space: nowrap;

Verwandt Empfehlungen:

Beispiel für die Javascript-Implementierung einer asynchronen Bild-Upload-Methode

So verwenden Sie CSS3-Bildmischung

So verwenden Sie CSS, um Bilder mit einem Rotationseffekt zu versehen

Das obige ist der detaillierte Inhalt vonCSS, um eine horizontale Anordnung und einen Scrolleffekt von Bildern zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!