黑科技！两行代码完美解决：同时设置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 使用队列实现线程同步
#通过queue的方式进行线程间同步,Queue在底层通过实现了dqueue(双生队列,在字节码时实现了线程安全)实现了线程安全 from queue import Queue import time ...
- thymeleaf入门
controller层添加实体 html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> ...
- 大咖云集！Kubernetes and Cloud Native Meetup 深圳站开始报名！
由阿里技术生态联合 CNCF 官方共同出品的 Kubernetes & Cloud Native Meetup 将在 8 月 31 日来到深圳.届时,阿里云.蚂蚁金服高级技术专家将携手来自国内 ...
- EntityUtils.toString(entity)处理字符集问题解决
爬取51Job和猎聘网的信息,想处理字符集问题(51job为gbk,猎聘为utf-8), 找到两个网站字符集信息都在同一标签下 就想先把网页保存成String,解析一遍获取字符集,然后将网页转换成对应 ...
- chrome安装react-devtools开发工具
我开始安装react-devtools的时候 百度了一波,都是写的不清不楚,官网又都是英文的 也不是完全理解,经过一番折腾出来以后,写个文档记录一下,也可避免新手首次安装走弯路 我安装react-de ...
- CHIP8模拟器的python3实现-3-指令实现
class Chip8CPU(object): def __init__(self, screen): self.registers = { 'v': [], 'index': 0, 'pc': 0, ...
- vue-v-for
1.v-for遍历数组和对象 <ul> <li v-for="item in array">{{item}}</li><br> &l ...
- idea基本使用
1.java项目导jar包 File->Project Structure->Modules->Dependencies->+ 2. 鼠标放在方法上一段时间后,显示该方法的注释 ...
- tcpdump 介绍
tcpdump 是一款强大的网络抓包工具,dump the traffice on anetwork,对网络上的数据包进行截获的包分析工具.熟练掌握 tcpdump 可以方便我们跟踪解决网络丢包,重传 ...
- Nginx01（Nginx简介）
一:序言 Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭借开源的力量,已经接近成熟与完善. 二:Nginx常用功能 1.Http代理 ...