黑科技！两行代码完美解决：同时设置overflow-x:hidden,overflow-y:visible无效的问题
不废话，直接上代码
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
height: 800px;
display: flex;
justify-content: center;
align-items: center;
}
.parent {
width: 80vw;
height: 200px;
background-color: aqua;
display: flex;
align-items: center;
}
.wrapper {
width: 100%;
display: flex;
align-items: center;
overflow-x: hidden;
overflow-y: visible;
padding: 500px 0; /*极为重要的两行代码 */
margin: -500px 0; /* 具体值可以根据实际情况调整 */
} .imgDiv {
padding-left: 50px;
} .child {
width: 70px;
height: 100px;
} .child:hover {
transform: scale(4, 4);
}
</style>
</head>
<body>
<div class="parent">
<div class="wrapper">
<div class="imgDiv">
<img
class="child"
src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
/>
</div>
<div class="imgDiv">
<img
class="child"
src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
/>
</div>
<div class="imgDiv">
<img
class="child"
src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
/>
</div>
<div class="imgDiv">
<img
class="child"
src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
/>
</div>
<div class="imgDiv">
<img
class="child"
src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
/>
</div>
<div class="imgDiv">
<img
class="child"
src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
/>
</div>
<div class="imgDiv">
<img
class="child"
src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
/>
</div>
<div class="imgDiv">
<img
class="child"
src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
/>
</div>
<div class="imgDiv">
<img
class="child"
src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
/>
</div>
<div class="imgDiv">
<img
class="child"
src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
/>
</div>
<div class="imgDiv">
<img
class="child"
src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
/>
</div>
<div class="imgDiv">
<img
class="child"
src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
/>
</div>
<div class="imgDiv">
<img
class="child"
src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
/>
</div>
<div class="imgDiv">
<img
class="child"
src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
/>
</div>
<div class="imgDiv">
<img
class="child"
src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
/>
</div>
<div class="imgDiv">
<img
class="child"
src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
/>
</div>
</div>
</div>
</body>
</html>
参考链接：
黑科技！两行代码完美解决：同时设置overflow-x:hidden,overflow-y:visible无效的问题的更多相关文章
- libcurl使用easy模式阻塞卡死等问题的完美解决---超时设置
libcurl使用时疑难问题: 在使用libcurl时, jwisp发现, curl_easy_perform是阻塞的方式进行下载的, curl_easy_perform执行后,程序会在这里阻塞等待下 ...
- (桥接)完美解决linux设置静态ip。
网上找来找去都是一些隔靴挠痒的操作,这里引自https://blog.csdn.net/yefeng0810/article/details/81150605.感谢大佬的博客.
- Python黑科技：6行代码轻松搭建FTP服务器
Python 黑科技 六行代码轻松搭建个人FTP服务器 什么是FTP服务器? FTP (File Transfer Protocol) 是一个用于客户端与服务器之间文件的协议.利用FTP我们就能做到在 ...
- 解决WordPress设置错误的url网站不能访问的问题
通过WordPress后台首选项更改了网站url地址之后,网站就会出现访问不了的情况,一般来说,网站后台也登陆不上去了,我从网上寻找到了四种方法,这四种方法前三种都是需要登陆到后台的,但实际上出错后, ...
- iOS 两行代码解决数据持久化
在实际的iOS开发中,有些时候涉及到将程序的状态保存下来,以便下一次恢复,或者是记录用户的一些喜好和用户的登录信息等等. 这就需要涉及到数据的持久化了,所谓数据持久化就是数据的本地保存,将数据从内存中 ...
- 完美解决C#Webbrowser控件设置Cookie问题
完美解决C#Webbrowser控件设置Cookie问题由于个人项目需求,需要把从抓包里面的Cookie数据写入到webbrowser空控件里,经过百度白百般折腾,结果还是失败,搜索到的答案基本上都是 ...
- 完美解决了span的宽度设置
下 面代码的CSS定义完美解决了span的宽度设置问题.由于浏览器通常对不支持的CSS属性采取忽略处理的态度,所以最好将display:inline -block行写在后面,这样在Firefox里面, ...
- 黑科技！仅需 3 行代码，就能将 Gitter 集成到个人网站中，实现一个 IM 即时通讯聊天室功能？
欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...
- GIAC2019 演讲精选 | 面向未来的黑科技——UI2CODE闲鱼基于图片生成跨端代码
一直以来, 如何从‘视觉稿’精确的还原出 对应的UI侧代码 一直是端侧开发同学工作里消耗比较大的部分,一方面这部分的工作 比较确定缺少技术深度,另一方面视觉设计师也需要投入大量的走查时间,有大量无谓的 ...
随机推荐
- python yield from (二)
#pep380 #1. RESULT = yield from EXPR可以简化成下面这样 #一些说明 """ _i:子生成器,同时也是一个迭代器 _y:子生成器生产的值 ...
- lego loam 跑镭神32线激光雷达
师弟反应镭神32线激光雷达(32C)录制的数据包不能跑lego loam,这里就总结一下. 首先lego loam默认的接受的topic name是velodyne_points,点云的frame_i ...
- Kubernetes 有状态与无状态介绍
Kubernetes 有状态与无状态介绍 无状态:deployment - 认为所有pod都是一样的,不具备与其他实例有不同的关系. - 没有顺序的要求. - 不用考虑再哪个Node运行. - 随意扩 ...
- Microsoft.Extensions.DependencyInjection 之一：解析实现
[TOC] 前言 项目使用了 Microsoft.Extensions.DependencyInjection 2.x 版本,遇到第2次请求时非常高的内存占用情况,于是作了调查,本文对 3.0 版本仍 ...
- CreateDatabase is not supported by the provider
背景:对于本地数据库如(SQLite\Access) Connection string error: “An exception occurred while initializing the da ...
- C#调用Activex中串口电子秤的数据,并将电子秤的数据显示到前端页面
大二的一个项目需要用到Activex技术将读取到串口中的数据在后台获取到,并将串口的数据写入数据库,这个过程需要在后台使用C#调用Activex控件已经使用的方法,然后在前端通过JavaScript进 ...
- SQLAlchemy--基本增删改查
目录 简介 安装 组成部分 简单使用 执行原生sql(不常用) orm使用(重点) 常用数据类型 Column常用参数 常用操作(CURD) 创建映射类的实例 创建会话Session 增加add()/ ...
- 第九届极客大挑战——小帅的广告（二阶sql注入）
也是经过一通扫描和测试,没发现其他有用信息,感觉这是个sql注入.其实对于二阶sql注入我以前没实践过,也没看过资料,只是知道这个名字,但不知道为何看到这道题就让我回想起了这个名词,所以查了一下二阶s ...
- Xml格式数据转map工具类
前言[ 最近在写一个业务,由于调UPS物流的接口返回的是一个xml格式的数据结果,我现在要拿到xml中某个节点的值,而这个xml数据是多节点多层级的,并且这某个节点的值有可能只有一条值,有可能有多条, ...
- Python从零开始——函数
一:Python函数知识概览 二:函数的定义与调用 三:参数传递 四:函数返回值 五:匿名函数的定义与调用 六:变量作用域与改变变量作用域