div横向滑动

最新推荐文章于 2025-05-26 16:12:05 发布

wangjiali123123

最新推荐文章于 2025-05-26 16:12:05 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： css css3

本文链接：https://blog.youkuaiyun.com/wangjiali123123/article/details/88932693

css 同时被 2 个专栏收录

8 篇文章

订阅专栏

css3

7 篇文章

订阅专栏

本文介绍了一个关于Flex布局的具体技巧，特别是如何通过调整row的宽度及利用flex-shrink属性来实现元素的滚动与换行效果。这对于解决网页布局中常见的响应式设计问题非常有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.row{
   display:flex;
   overflow-y:hidden;
   overflow-x:scroll;
   width:100%;
   flex-wrap:nowrap;
   .col{
      width:125px;
      height:100%;
      flex-shrink: 0;
   }
}

row的宽度不能太大。。否则不会移动，flex-shrink（默认1）设置为0 flex布局才会换行。。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wangjiali123123

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

html中，让多个div横向排列且不换行（左右滑动）

weixin_48596030的博客

06-11

3477

html中，让多个div横向排列且不换行（左右滑动）

多个div页签横向展示，滑动点击那个，那个展示在屏幕中间(主要移动端)

jieweiwujie的博客

11-08

199

【代码】多个div页签横向展示，滑动点击那个，那个展示在屏幕中间(主要移动端)

参与评论您还未登录，请先登录后发表或查看评论

移动网页div左右滑动

02-21

div 移动网页 webapp 左右滑动滑动 swipe

掌握div元素的横向排列技术

最新发布

weixin_35516624的博客

05-26

807

在Web开发的早期，CSS浮动主要用于实现文字绕排效果。然而，随着时间的推移，开发者们开始使用浮动来创建各种布局，尤其是在表格布局不太适用的情况下。浮动元素脱离了正常的文档流，这意味着它们不再占据页面空间，从而允许文本或其他元素环绕在它们周围。浮动布局的关键作用包括：- 实现响应式网页布局；- 创建复杂的网格系统；- 灵活地处理图片和文本的环绕效果；- 设计多列布局而不需要使用复杂的表格布局。CSS Grid布局是一种强大的二维布局系统，它允许我们使用一系列的行和列来组织内容。

css div横向滚动

zhangxiaodui的博客

04-14

975

【代码】css div横向滚动。

css - flex布局实现div横向滚动

爱意迷了眼丶的博客

02-27

2353

父盒子：子盒子：

html+css+js实现div横向滚动效果，简单无缝处理

weixin_43612593的博客

03-20

1816

html+css+js实现div横向滚动效果，简单无缝处理

Vue 实现从小到大的横向滑动效果详解

10-16

在本文中，我们将深入探讨如何使用Vue.js框架实现从小到大的横向滑动效果。这种效果常见于各种网页的轮播图或滑动导航，能够给用户带来流畅的交互体验。我们将借助vue-awesome-swiper插件来实现这一功能。首先，...

CSS—移动端导航（div）横向滑动，并消除横向滚动轴（图文详情）

Poppy_LYT的博客

08-05

6687

CSS—移动端导航横向滑动，并消除横向滚动轴假设我写了一个导航（div照样适用） <ul> <li>学习</li> <li>学习</li> <li>学习</li> <li>学习</li> <li>...

使用鼠标拖拽div，实现横向滚动

热门推荐

ROVAST的专栏

04-09

1万+

效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.bootcss.co

向左滚动-完整DIV+CSS+JS不间断横向滚动代码

11-09

向左滚动-完整DIV+CSS+JS不间断横向滚动代码欧耶

div左右滑动demo

07-23

两个div在一个父div中左右滑动，在一个页面分为登录注册两个div。

div跟随滑动事件

09-07

鼠标滑动到容器上时，div跟随；鼠标滑动到容器上时，div跟随；鼠标滑动到容器上时，div跟随；鼠标滑动到容器上时，div跟随；

页面中DIV横向滚动

weixin_30371469的博客

12-11

1374

某些时候页面可能要显示多个信息，那么页面不够宽的话就会撑出来，是页面可以横向滚动，但那是不美观的，解决的办法可以内嵌iframe，或者设置DIV样式。内嵌iframe时，如果没有参数传递，或者参数过少的话会和方便，处理起来也比较容易。但是如果参数过多的话，就会比较繁琐了，那么设置DIV横向滚动的话就可以解决这个麻烦了。效果图如下：下面上代码了，首先HTML代码： <...

Css实现div卡片【横向滑动】效果（图文+完整源代码）

chengchong_cc的博客

03-30

592

参考网址：https://blog.51cto.com/u_15654527/5326466。用于多张图片滑动展示。

滑动 div

qq550764107的专栏

07-23

658

.wrap {float:left; position:relative; width:247px; height:150px; z-index:1; overflow:hidden;} .cc {height:140px; position:absolute; top:0px; left:-494px; z-index:2;overflow:hidden} .btn {float:left;

多个div实现横向滚动

在希

08-06

3378

多个div实现横向滚动最近在做项目的时候需要实现多个元素横向排列，需要其可在固定范围内左右滑动，原本以为只需要父元素的宽度固定子元素的宽度超过父元素的宽度几个实现滑动，但事实上并不是这样的。最终实现方式记录如下： 1、实现如下：设置多个并排的元素外面嵌套一层div（.parentDiv）,设置此div的宽度等于所有子元素的宽度之和. 在.parentDiv的外层在嵌套一个div设置样式style: overflow-x: auto; 实例：div中多个图片实现左右滑动注：实际中.imgBox的宽

div实现横向滚动

liuriri的博客

11-25

2711

我是前端开发 .wrap{ overflow-y:hidden; overflow-y:auto; width:100%; white-space:nowrap; } .content{ width:480px; background:#112233; color:#fff; white-space:nowrap; display:inline-block; }

WEB横向循环滑动技术实现与应用

WEB横向循环滑动是一种常用的网页设计交互技术，主要通过JavaScript（JS）编程实现。它允许用户在浏览网页时，通过拖动或滑动的方式横向切换页面中的内容。这种设计在移动设备上的触摸屏幕中尤其常见，因为用户可以...