CSS横向滚动
Flex版本
.super {
display: flex;
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
.sub {
width: 200px;
height: 50px;
flex-basis: 200px; 子容器基准大小
flex-shrink: 0; 表示在不伸缩的情况下子容器的原始尺寸
}
常规版本
.super {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
.sub {
display: inline-block;
width: 200px;
height: 50px;
}
CSS横向滚动的更多相关文章
- 使用elementUI滚动条之横向滚动
用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...
- 利用overflow-x实现横向滚动的xiaoguo
在进行app开发中经常遇到横向滚动的效果,相信很多人都是用js写的吧,其实用css的overflow-x也可以写出啦哦~~~ (1)介绍overflow-x: 1)浏览器支持 所有主流浏览器都支持 o ...
- swiper3d横向滚动多张炫酷切换banner
最近有了个新需求,swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 类似,但是还需要h5手机触摸滚动啊啊啊啊,昨天折腾了半个早上总算完成,今天乖乖跑来m ...
- 微信小程序scroll-view横向滚动
官方文档给的代码复制下来发现无法滚动,没反应,使用css设置浮动属性也无效 官方没有给出css代码,横向需要设置两个css属性才行: white-space: nowrap; ----规定段落中的文本 ...
- html5 tab横向滚动,无滚动条(transform:translate)
html5 横向滚动,用到了 touchstart.touchmove.touchend 控制修改transform:translate属性;[手机端或者浏览器模拟手机模式才有效果] [转载请注明出处 ...
- jQuery实现文字横向滚动效果
HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...
- JS浏览器滚轮事件实现横向滚动照片展
if(window.attachEvent){ ///*IE8注册事件*/ this.oc.attachEvent('onmousewheel',function(e) { //函数体 }); } e ...
- 【CSS3】精美横向滚动菜单按钮
废话不多说,直接上图: 然后是代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- css横向导航条
css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...
- 【吉光片羽】js横向滚动与浮动导航
1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...
随机推荐
- Jetpack架构组件学习(6)——使用Glance实现桌面小组件
原文地址: Jetpack架构组件学习(6)--使用Glance实现桌面小组件-Stars-One的杂货小窝 公司陆续整了几个Compose写的app,有个小组件的功能,顺便试了下Jetpack库里的 ...
- day05-面向对象编程:基础语法
Java面向对象:类的基础语法 [ 任务列表 ] 1.面向对象快速入门 2.什么是面向对象 3.类的基础语法--构造器 4.类的基础语法--this关键字 5.类的基础语法--封装 6.类的基础语法- ...
- 对比使用DeepSeek与文新一言,了解DeepSeek的关键技术论文
DeepSeek是国内大模型技术的新秀,最近也在业界和媒体界火爆出圈,所以想学习一下其技术. 大模型时代,学习知识,当然首先想到利用大模型,由于在过去一年,对DeepSeek使用不多,所以想和文新一言 ...
- 【忍者算法】从风扇叶片到数组轮转:探索轮转数组问题|LeetCode 189 轮转数组
从风扇叶片到数组轮转:探索轮转数组问题 生活中的算法 想象你在看一个风扇缓缓转动,每次转动三个叶片的距离.原本在上方的叶片转到了右侧,原本在右侧的叶片转到了下方...这就是一个生动的轮转过程.再比如, ...
- Hetao P1031 萌萌题 题解 [ 蓝 ] [ 线性 dp ]
萌萌题:一道结合了观察性质的线性 dp. 观察 我们先考虑极端情况:所有数相同,所有数降序排列两种情况. 对于所有数相同的情况,我们发现,最终可以合并出来的区间,最多只有 \(n \log n\) 个 ...
- QT5笔记:34. 视口和窗口
 例子: void Widget::paintEvent(QP ...
- 赛博朋克2077/Cyberpunk 2077 v2.1|整合DLC|容量96.9GB|官方简体中文
<赛博朋克2077>是知名<巫师>系列开发商CD PROJEKT RED公布的一款角色扮演游戏,故事设定在黑暗的.科技极度发达的腐败未来世界中,并且兼有沙盒元素与RPG机制.游 ...
- Linux - Linux终端里的二维码
qrencode:Linux 操作系统中生成二维码,点此进入下载页面 1.将tar包上传到 Linux 服务器上并解压:tar -zxvf qrencode-x.x.x.tar.gz 2.在 .bas ...
- SuperSocket 服务端 和 SuperSocket.ClientEngine 客户端及普通客户端
internal class Program { //static void Main(string[] args) //{ // byte[] arr = new byte[1024]; // 1. ...
- 【MATLAB习题】铰链四杆机构的运动学分析
铰链四杆机构题目&已知数据 matlab 代码 主程序文件: function main %输入已知数据 clear; i1=101.6; i2=254; i3=177.8; i4=304.8 ...