首頁 > web前端 > css教學 > 主體

css實現圖片橫向排列滾動效果

小云云
發布: 2017-12-09 10:15:34
原創
6421 人瀏覽過

本文主要主要介紹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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板