讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > css教程 > 正文

css实现图片横向排列滚动效果

小云云
发布： 2017-12-09 10:15:34
原创
6802人浏览过

本文主要主要介绍css实现图片横向排列滚动效果,需要的朋友可以参考下，希望能帮助到打大家。

具体代码如下所示：

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

wordpress主题：格子商铺主题
wordpress主题：格子商铺主题

这是易秀购主题网转载的一款原创来至web主题公园的一款wordpress cms主题，非常适合做图片展示，或婚纱摄影类wordpress主题，采用了大气的网格化无缝设计，使列表以格子铺的方式排列，鼠标悬停的可以出现文章的简介。网站上方可以书写自己的广告语，图片也是可以替换掉的，图片会随着鼠标的移动而轻移，并且在鼠标滚动的时候，下面的模块会直接遮盖这个区域，这款wordpress cms主题视觉效果

wordpress主题：格子商铺主题 2
查看详情 wordpress主题：格子商铺主题 

<p class="imageList">
    @@##@@
    @@##@@
    @@##@@
    @@##@@
    @@##@@
</p>
登录后复制

css实现图片横向排列滚动效果

这里注意，img标签不能左浮动，外层容器必须加不换行

立即学习“前端免费学习笔记（深入）”；

white-space: nowrap;
登录后复制

相关推荐：

javascript实现异步图片上传方法实例

CSS3图片混合怎么使用

如何用CSS做图片旋转效果

css实现图片横向排列滚动效果css实现图片横向排列滚动效果css实现图片横向排列滚动效果css实现图片横向排列滚动效果

以上就是css实现图片横向排列滚动效果的详细内容，更多请关注php中文网其它相关文章！

相关标签：
css

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：CSS 引入方式 下一篇：浅谈CSS以图换字的9种方法
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
cssfixed定位按钮被输入法遮挡怎么办_移动端需避免底部fixed 移动端底部fixed按钮被软键盘遮挡的本质是浏览器对fixed定位在键盘弹出时行为不一致；推荐用sticky替代、监听键盘状态、利用env(keyboard-inset-bottom)变量或嵌入输入框内布局来解决。
2025-12-23 13:12:09
433
css盒模型中子元素突破容器怎么办_css突破问题用overflow隐藏溢出 子元素突破父容器通常因尺寸超限、绝对定位、内边距或边框导致盒模型溢出，可通过设置overflow:hidden裁剪溢出内容，但需注意隐藏阴影等副作用，建议结合box-sizing、max-width和Flex/Grid布局优化结构。
2025-12-23 12:47:10
467
css背景图片重复显示怎么关闭_通过background-repeat控制平铺方式 关闭CSS背景图片重复显示需设background-repeat为no-repeat；可单独控制横向（repeat-x）或纵向（repeat-y）平铺；常配合background-position、background-size等实现精确定位与适配。
2025-12-23 12:27:08
158
CSS背景图片位置如何响应变化_background-position百分比或关键字 background-position的百分比和关键字值通过点对齐机制实现响应式定位，30%40%表示背景图内对应点与容器点对齐，关键字如center等同50%50%，配合background-size可确保不同设备下视觉焦点一致。
2025-12-23 12:07:11
853
CSS选择器能选择空元素吗_使用:empty伪类实现精准控制 :empty伪类可精准选中无内容元素，用于隐藏空容器或添加占位样式，需注意空格和换行会使其失效，现代浏览器均支持。
2025-12-23 12:02:02
419
cssabsolute定位适合哪些场景使用_适用于装饰性与悬浮元素 position:absolute适合脱离文档流且需精准定位的元素，如右上角标签、悬浮按钮、覆盖层、提示气泡等，依赖相对定位父容器提供上下文，配合z-index和transform实现层级控制与动画优化。
2025-12-23 11:45:08
285
css图标旋转动画怎么写_利用animation和transform rotate CSS图标旋转动画需定义@keyframes旋转帧并用animation应用，注意元素display兼容性、避免overflow裁剪，支持方向控制、cubic-bezier节奏调节及hover暂停，图标与文字应分层以确保仅图标旋转。
2025-12-23 11:36:09
286
css边框圆角失效怎么办_确认overflow hidden或background设置不阻断border-radius 边框圆角失效最常见的原因是父容器overflow:hidden裁剪或background未设background-clip:padding-box导致遮挡；需优先排查这两项，再检查边框、transform和display等细节。
2025-12-23 11:23:02
378
cssicon需要心跳节奏动画怎么实现_结合scale与keyframes生成心跳动效 心跳动画核心是模拟收缩快（0.2s）、舒张慢（0.4–0.5s）且带过冲回落的节奏，需用自定义cubic-bezier缓动与非对称关键帧比例实现，而非简单对称缩放。
2025-12-23 11:05:44
639
css sticky滚动吸顶距离不准怎么办_结合scroll-margin-top或准确设置top值 sticky吸顶不准本质是浏览器计算top基准点时未考虑内边距、滚动条偏移或父级定位干扰；推荐用scroll-margin-top精准控制吸顶留白，兼容性好且语义清晰。
2025-12-23 10:54:32
558
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部