黑科技！两行代码完美解决：同时设置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侧代码 一直是端侧开发同学工作里消耗比较大的部分,一方面这部分的工作 比较确定缺少技术深度,另一方面视觉设计师也需要投入大量的走查时间,有大量无谓的 ...
随机推荐
- 用Maven整合SSM框架
前述 Maven 是专门用于构建和管理Java相关项目的工具,利用 Maven 的主要目的是统一维护 jar 包.关于 Maven 的安装在这篇里面就不说了. SSM(Spring+SpringMVC ...
- MyCat(转)
https://www.cnblogs.com/bingosblog/p/7171501.html http://www.cnblogs.com/joylee/p/7513038.html ht ...
- 转 经典分类网络Googlenet
转自https://my.oschina.net/u/876354/blog/1637819 2014年,GoogLeNet和VGG是当年ImageNet挑战赛(ILSVRC14)的双雄,GoogLe ...
- Zabbix图表中文乱码(包含Docker安装乱码)
目录 Zabbix 4.0 版本 Zabbix 3.0 版本 Zabbix 4.0 Docker 版本 图表乱码问题解决 文章github 地址: 点我 最近在看 Zabbix 4.0 版本的官方文档 ...
- Enum.GetUnderlyingType(obj.GetType())
Enum.GetUnderlyingType(obj.GetType())获取保存枚举值的数据类型:
- Winform 通过 WebBrowser 与 JS 交互
Winform 通过 WebBrowser 与 JS 交互 魏刘宏 2019.08.17 之前在使用 Cef (可在 Winform 或 WPF 程序中嵌入 Chrome 内核的网页浏览器的组件)时, ...
- C# Random
一.简介 在Random类用于创建随机数.(当然是伪随机的.) 二.Random用法 例: Random rnd = new Random(); int month = rnd.Next(1, 13) ...
- SpringBoot+Swagger整合
0.引言及注意事项 Swagger是一个接口文档工具,依照Swagger可以0配置开发接口.不过要注意,Swagger是基于SpringBoot1.47版本开发的,而SpringBoot现在基本都是是 ...
- PHP 简单面向对象 验证码类（静态实例对象调用）
没事写了一个简单的面向对象验证码类,可以直接使用(替换一下字体路径) <?php class authCode { private static $instance = null; #实例对象 ...
- Innodb Change Buffer
Change Buffer属于Innodb内存中的一块结构,它主要用来缓存对二级索引数据的修改(insert, update, delete)操作当二级索引不在Buffer pool中的时候,这些写操 ...