黑科技！两行代码完美解决：同时设置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侧代码 一直是端侧开发同学工作里消耗比较大的部分,一方面这部分的工作 比较确定缺少技术深度,另一方面视觉设计师也需要投入大量的走查时间,有大量无谓的 ...
随机推荐
- 阿里云 CDN 业务基于边缘容器的云原生转型实践
导读:本文基于边缘容器的阿里云 CDN 云原生实践, 涵盖了边缘容器的背景和趋势,边缘托管集群 ACK Managed Edge K8s(文中简称“Edge@ACK”) 的能力.架构,以及基于边缘容器 ...
- 数据持久化之bind Mounting
一.默认情况 1.创建一个Nginx测试镜像 Dockerfile: FROM nginx:latest WORKDIR /usr/share/nginx/html COPY index.html i ...
- Java8新特性——新一套时间API的使用
JDK 1.0中包含了一个java.util.Date类,但是它的大多数方法已经在JDK 1.1引入Calendar类之后被弃用了.而Calendar并不比Date好多少.它们面临的问题是: 可变性: ...
- [Node.js] TypeScript 实现 sleep 函数
看过不少网友的文章, 有各种方法, 但我想要的是一个能线性执行的sleep函数. /** * 等待指定的时间 * @param ms */ static async sleep(ms: number) ...
- C# NPOI Export DataTable C# NPOI导出DataTable 单元格自适应大小
1.Install-Package NPOI -v 2.4.0 2. using NPOI.XSSF; using NPOI.XSSF.UserModel; using NPOI.SS.UserMod ...
- C#,File.AppendAllLines(),换行"\r\n"
string sourcePath = @"D:\GL\20160826141915999999.txt"; for (int i = 0; i < 10; i++) { G ...
- Tp5.1开发初入门
今天需要给金融部门那边做一个信用卡的推广页面,他们系统是用PHP的tp框架做的.我记得最早做tp还是2的时候,和现在的5.1相差太大了,中间开发的时候,还是遇到了点问题.所以,把今天的问题记录下,作个 ...
- jmeter入门操作 = 接口
1.没安装工具的朋友,不熟悉菜单插件使用的朋友,请先看:https://www.cnblogs.com/beile/p/11007754.html 2.开始调用http请求 测试地址:http://h ...
- 使用 vue-cli(脚手架)搭建项目
一.使用 vue-cli(脚手架)搭建项目 1) Vue-cli 是 vue 官方提供的用于搭建基于 vue+webpack+es6 项目的脚手架工具 2) 在线文档:https://github.c ...
- fatal error: openssl/bn.h: No such file or directory
出现如下错误 fatal error: openssl/bn.h: No such file or directory 解决办法 # sudo apt-get install libssl-dev