黑科技！两行代码完美解决：同时设置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侧代码 一直是端侧开发同学工作里消耗比较大的部分,一方面这部分的工作 比较确定缺少技术深度,另一方面视觉设计师也需要投入大量的走查时间,有大量无谓的 ...
随机推荐
- kmv 学习笔记 工具
qemu:kmv的文本管理工具,包括qemu-kvm.qemu-img libvirt:是一套免费.开源的支持Linux下主流虚拟化工具的C函数库,libvirtd是运行的守护进程的名称.包括GUI: ...
- C#网页 截图
using System.IO; using System.Drawing; using System.Drawing.Imaging; using System.Threading; using S ...
- Delphi - 操作Excel数据公式的实现
procedure TF_SMP_FT_NEW.RzBitBtn_StartToChangeClick(Sender: TObject); var i, j, ni, nj, iRows, iCol, ...
- 面试前必须要知道的21道Redis面试题
1.使用redis有哪些好处? 速度快,因为数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1) 支持丰富数据类型,支持string,list,set,so ...
- Appium基于PO模型的自动化测试（Python）
基于python单元测试框架unittest完成appium自动化测试,生成基于html可视化测试报告 代码示例: #利用unittest并生成测试报告 class Appium_test(unitt ...
- echarts折线图上下颜色渐变样式
// 折线图let lineChart = echarts.init(document.getElementById('lineChart'));let lineOption = { title: { ...
- CTF必备技能丨Linux Pwn入门教程——stack canary与绕过的思路
Linux Pwn入门教程系列分享如约而至,本套课程是作者依据i春秋Pwn入门课程中的技术分类,并结合近几年赛事中出现的题目和文章整理出一份相对完整的Linux Pwn教程. 教程仅针对i386/am ...
- MYSQL练习随笔
解法练习 案例1.子查询练习 字段 说明film_id 电影idtitle 电影名称description 电影描述信息category_id 电影分类idname 电影分类名称last_update ...
- leetcode整理（一）
leetcode题目整理,基本上不是最优解 1. 回文数 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121 输出: true 示例 ...
- jetbrains 系列编辑器
下载 webstorm下载地址:https://www.jetbrains.com/webstorm/download/previous.html idea下载地址:https://www.jetbr ...