html盒子横向滚动

最新推荐文章于 2024-05-16 18:16:14 发布

MrHao_

最新推荐文章于 2024-05-16 18:16:14 发布

阅读量2.7k

点赞数 1

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/mrhao_/article/details/108992997

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

父盒子css:

width: 100%; 
overflow: hidden;
overflow-x: scroll;
white-space: nowrap;  //使用这个后，子盒子文字会在一行显示

子盒子css：

display: inline-block;
white-space: normal;//子盒子加上这个就可以内容就可以自动跨行了

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MrHao_

关注关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【CSS】固定区域横向滚动

Bug笔记

11-27

404

CSS固定区域横向滚动

PC端内容横向滚动效果

热门推荐

NicoleChan的博客

12-11

1万+

目录前言具体操作思路html代码css代码前言想要实现的效果如下具体操作思路首先要有一个大的div，里面包裹的内容可以左右移动。开始以为是很复杂的操作，查了相关资料发现很简单，只需要操作css，都不需要自己写js html代码 class="scrollBox"的块就是最外层的包裹块；class="blockDiv"的块是通过v-for循环产生多个 <!--代码进行了省略处理--...

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

CSS - 让容器（盒子）支持横向无限滚动

王佳斌

05-26

1698

效果图如下图所示，盒子内容过多后会自动向横向增加。解决方案按如下示例代码设置的父容器，自动支持。 <div class="box"> ... </div> .box{ white-space: nowrap; display: flex; overflow: scroll; } ...

html盒子里面的盒子怎么加横向滚动条

SSRwang的博客

05-20

556

横向滚动条

html 横向滑动

笔记库

09-20

366

ul { width : 100%; /* display : inline; */ white-space : nowrap; overflow-x : auto; float : left...

html5 横向滑动导航栏

YDHIT的博客

06-03

1514

联系我们</a><a href="#">加入我们</a><title>横向滑动导航栏</title><a href="#">首页</a><a href="#">新闻</a><a href="#">产品</a><a href="#">反馈</a><a href="#">帮助</a><a href="#">设置</a><a href="#">退出

vue 盒子横向滚动并取消滚动条

w1753034677的博客

03-07

1016

html <div class="head-img-text">  <div v-for="i in 10" :key="i" class="img-box"> <img src="https://img01.yzcdn.cn/vant/cat.jpeg"> <div class="text...

使用弹性盒子写移动端的横向和纵向滚动条效果

dongjianhui15的博客

03-11

592

弹性盒子横向滚动条和纵向滚动条

滚动滚轮使盒子横向滚动

weixin_小白鼠的博客

01-21

530

observer 对 resizeObserver 自身的引用，因此需要它的时候，你要从回调函数的内部访问。例如，这可用于在达到特定的情况时，自动取消对观察者的监听。ResizeObserver 构造函数创建一个新的 ResizeObserver 对象，它可以用于监听元素内容盒或边框盒或者尺寸的大小。entries是一个数组,可以用于获取每个元素改变后的新尺寸。

微信小程序使用scroll-view组件，实现两个盒子横向滚动

最新发布

09-29

如果你想让两个盒子水平方向上做滚动，首先需要在页面的wxml文件里设置`scroll-x`属性表示水平滚动，并将两个盒子作为`scroll-view`的子节点。这里是基本的示例代码： ```html  盒一...

HTMl - 横向滚动实现

EricJeffrey的博客

02-02

5196

文章目录横向滚动使用flex容器使用column总结横向滚动虽然大多数网页都是垂直滚动的，但对于以页显示地网站来说，横向滚动翻页(就像word的阅读视图那样)往往也是个不错的选择。如下为几种横向滚动的实现方式，不论哪种方式中，overflow-y: hidden都是必须的，该属性会禁用竖直方向的溢出。笔者才疏学浅，如有问题还望评论指正。使用flex容器 flex容器详细使用可以参考阮一峰老师...

html css 横向滑动效果,纯CSS实现Lavalamp效应的滑动菜单效果

weixin_33293858的博客

06-07

2735

下面我们将使用纯css实现滑动菜单效果，使用 css3 转换和重新创建一般同级连结符选择器。下面我们将讨论三个简单的例子。第一步：写在前面的我们使用了一个叫unicaone的google web字体,在“星形和箭头”示例中我们使用了下面的图片组合第二步：html三个例子的每个 html 是相同的。我们将只是切换名为ph-line-nav的class到ph-dot-nav和ph-heart-nav....

html 简单的网页横向滚动

weixin_64261457的博客

05-16

915

* Webkit浏览器 *//* 隐藏滚动条 */

通过css在网页中实现容器内元素横向滚动

酱茄 jiangqie.com

03-18

1961

网页中元素默认是纵向排列的，我们可以通过css属性将容器内子元素实现横向排列，超出隐藏，并可以横向滚动。基础结构如下: <div class="scroll-box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item

HTML元素横向滚动

GIS小虫的博客

08-16

1291

ts版的 js把类型去掉就行 /** * 横向滚动 * @param domObj */ export function initScroll(domObj: HTMLElement) { domObj.addEventListener('mousewheel', handler, false); function handler(event: any) { // 获取滚动方向 const detail = event.wheelDelta || event.detai.

三个属性让你学会书写横向滑动窗口！内附代码和详解！

yilia学习小园

07-18

726

此时子组件child1、child2和child3明显宽度变窄了，要是想保持子组件宽度不变，需要在子组件上添加flex-shrink: 0约束。之所以设置这个属性有用，是因为在默认情况下，flex-shrink的值为1，父元素宽度不够时，子元素会自己调整所占的宽度比。除此之外还有一个属性常被提到，即white-space，可以控制自组件内的文字不换行，如下图所示。父组件改为flex布局之后，子组件默认横向排列，代码和组件如下所示。初始代码和界面如下所示，显示为三个长宽固定的组件，默认从上到下排列。

两个盒子同步滚动

vvvvvv333333333的博客

05-06

901

网上大多数都是一个div 盒子随着另外一个div盒子同步滚动，我今天主要想说的是textarea 随着 div 同步滚动。

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

weixin_48596030的博客

06-11

3278

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

Vue中利用Js实现鼠标滚轮控制盒子横向滚动（监听鼠标滚轮滚动事件，火狐DOMMouseScroll、谷歌mousewheel）

是日前端

12-03

1890

思路：使用js来实现监听鼠标滚轮滚动监听事件 <div id="box" class="box"> <div></div> </div> mounted() { this.scrollInit() }, methods: { scrollInit() { // 获取要绑定事件的元素 const scrollDiv = document.getElementById("box"); // docume.

使用弹性盒子写移动端的横向滚动条效果

weixin_56548715的博客

03-09

965

使用弹性盒子写移动端的横向滚动条效果