当我使用overflow:auto添加一个滚动条时，我的div不再是并排的

当使用overflow:auto添加一个滚动条时，div元素不再是并排的。这是因为overflow:auto属性会根据内容的大小自动决定是否显示滚动条。当内容超出div的可见区域时，会显示滚动条，导致div元素不再并排。

overflow:auto属性有以下几个特点：

当内容不超出容器的可见区域时，不显示滚动条。
当内容超出容器的可见区域时，显示滚动条。
横向滚动条和纵向滚动条会根据内容的大小自动显示。

这个属性常用于处理容器内部内容过多的情况，以便在有限的空间内显示内容，并提供滚动功能以便查看全部内容。

推荐的腾讯云相关产品是腾讯云云服务器（CVM），它是一种基于云计算技术的虚拟服务器，提供灵活的计算能力和可靠的云端服务。您可以通过腾讯云云服务器搭建自己的网站、应用程序、数据库等，并根据实际需求进行弹性调整。

腾讯云云服务器产品介绍链接地址：腾讯云云服务器

相关·内容

JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解

2.2 实例在页面中，溢出说得更加通俗一些就是有没有滚动条出现，出现了，说明子元素有一部分被父元素遮挡了，就溢出了，下面给出两个实例，一个没有溢出（没有滚动条），一个溢出了，分别观察他们的scrollWidth...{ width: 200px; height: 180px; background: skyblue; overflow: auto; } #children_div{ width...scrollLeft的概念是返回元素左边缘与视图之间的距离，我们一步一步的理解，首先，如上图所示，当我们没有滑动水平滚动条时，元素与它的内容默认是左上角顶点重合的，所以他们之间是没有距离的，此刻的 scrollLeft...当我们拉动水平滚动条时，元素与视图就不再是左上角顶点重合了，水平之间是存在距离的（按左上角顶点重合计算),可以看到现在的scrollLef有了数值，因为没有移动垂直滚动条，因此垂直方向仍然是没有距离的。...当我将水平，垂直滚动条都拉到底部时，scrollLeft 和 scrollTop 都分别为116.8 和156.8 ，我设置的元素宽高分别为：200 180 ，视图（子元素）宽高分别为：300 320

3.7K4 0

CSS笔记(15)

如果隐藏元素不想要原来的位置,就用display : none 原图隐藏后 3.overflow溢出 overflow属性指定了如果内容溢出一个元素的框(超出其高度及宽度)时,会发生什么....属性值描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉 scroll 不管超出内容与否,总是显示滚动条 auto 超出自动显示滚动条,不超出不显示滚动条...这是溢出的效果,相当于visible: hidden的效果 scroll的效果当内容过多溢出时auto的效果当内容不溢出时auto的效果,简单来说就是按需....下面做一个土豆网的案例当鼠标经过时,显示遮罩层和播放图标这时就要用到我们的隐藏和显示知识了,遮罩层应该是整个盒子的一个子元素,不占有位置,因此要使用绝对定位,而元素的隐藏使用的是display.../images/tudou.jpg" alt=""> div> 关于鼠标经过时的效果,使用伪类hover时一定要注意,是将鼠标移动到大盒子时才出现遮罩层,

1.1K1 0

CSS 中你需要知道 auto 的一切！

div> div> 要使.item获得其容器的全部高度，我们可以使用以下方法之一: 给.wrapper一个固定的高度，然后为.item元素添加height: 100% 对.wrapper使用...当我们有一个元素应该在它的父元素内部水平和垂直居中时，我们可能会倾向于使用translateX或translateY。我们可以使用下面方法让具有绝对定位元素居中：设置的宽度和高度。...当我们有一个网格，并且其中的网格项目具有margin-left: auto时：该项目将被推到右边，其宽度将基于其内容长度考虑下面的例子： ? 当我们希望item1的宽度基于其内容，而不是网格区域。...overflow 属性当我们有一个元素时，我们应该考虑它应该包含的最小和最大内容。如果内容超过了最大值，那么我们需要显示一个滚动条。...对于这种情况，我们可以使用以下代码： .modal-body { overflow-y: auto; } 这样，只有当内容高度足够大时，它才会显示滚动条。

5.5K3 0

学前端到了CSS阶段，你一定要掌握这9大防御式开发技能

如果标题过长，我们可以使用...省略号来处理。而不是等到项目上线，实际问题发生时，再来修改代码。二、防御式CSS防御式CSS是一个片段的集合，可以帮助我们规避“以防万一”产生的问题。...：必要时显示滚动条在内容比较长的情况下，可以通过设置 overflow-y控制滚动条是否展示。...当内容溢出出现滚动条时，因为滚动条要占据一部分空间，则会造成文字占据的空间变窄，因而会造成重排。我们可以元素添加scrollbar-gutter:stable;来避免这个问题。...; overflow-y: auto; background-color: skyblue; /*当滚动到滚动条底部和顶部时，会触发父元素的滚动条滚动*/...，多网站、多系统部署；使用使用 Git 在线项目部署；这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。

1.8K0 0

html div 隐藏滚动条样式,div滚动条样式隐藏与显示

大家好，又见面了，我是你们的朋友全栈君。 DIV滚动条样式是可以设置的，CSS滚动条同样也可以显示与隐藏，对div设置滚动条，设置其横向滚动条和纵向滚动条样式应该怎么做呢？...要设置CSS滚动条样式，需要用到overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。...同时也可以使用CSS样式设置html框架iframe的滚动条隐藏，接下来为大家介绍。...overflow-x:visible 不剪切内容也不添加横向滚动条 overflow语法值 overflow:visible | auto | hidden | scroll 参数说明： visible...在需要时剪切内容并添加滚动条，DIV默认情况也是这个值，但需要设置时候设置即可； hidden：不显示超过对象尺寸的内容； scroll：总是显示滚动条。

8.9K6 0

CSS 中关于 Overflow ，你需要了解的这些知识点！

简介要使用overflow属性，我们需要确保将其应用到的元素具有以下特征：块级元素(例如:div、section)，通过height或max-height设置高度。...通过设置高度，我的意思是项目应该有内容(不是空的)，也不是添加一个显式的高度。...在上图中，无论内容是否长，滚动条总是可见的。注意，这取决于操作系统。 Auto auto这是一个聪明的关键字，仅当内容比其容器长时才显示滚动条。 ?...我使用`auto`是因为它在内容足够长之前不会显示滚动条 */ .modal__content { flex-grow: 1; /* [1] */ overflow-y: auto; /...大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。 Overflow的常见问题：在手机上滚动例如，当我们有一个滑动条时，仅仅添加overflow-x是不够的。

5.2K2 0

水平滚动条

一行超出的内容默认是垂直方向显示滚动条，如果需要水平方向滚动条主要用到并排Div 的父级设置white-space: nowrap，并排的div设置display:inline-block; 因为display...:inline-block 会引起几个像素的空隙，需要在父级设置font-size:0;可以去掉相邻小div的空隙完整的代码如下： div class="" id="ta_1" style="overflow-x...:auto;"> div class="all-smallImg-wrap"> div class="smallImg-wrap"> div class.../dist/img/login-bg1.jpg" alt="" /> div> div class="title">标题11div>...div> div class="smallImg-wrap"> div class="smallImg"> <img src

2.5K1 0

CSS杂谈

当我们想要一个div元素居中，那么我们要给这个div宽度然后设置margin 0 auto。...实在需要调整的话就使用padding，给input设定小点的高度，然后设置padding。滚动条大小是可以设置的，还可以设置一些简单的样式，只不过都要加前缀等。...当你要隐藏滚动条的时候，把有滚动条的子元素放到一个父元素里面，子元素宽度大于父元素，父元素设置overflow hidden就可以了。...当我们想要写一些可以左右滑动的时候，父元素宽度100%，然后设置overflow-x scroll和white-space nowrap，子元素设置display inline-block。...当你要做很多边框一层一层的时候，我想大部分会采用很多div上下左右居中，然后不停背景图片，这边推荐使用box-shadow，其他都设置0，调整扩张半径。两层border的时候，使用outline。

8002 0

html中div滚动条设置,DIV滚动条属性及样式设置方式「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。...DIV滚动条属性及样式设置所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。...其功能大约是为了节约页面空间，就是所谓的“缩地”了。当div所定义的区域的内容达到一定程度时，在div标签里面嵌入css样式表，定义overflow的属性值，设置DIV滚动条相关的属性。...: visible却省值，没有DIV滚动条，根据内容自动扩撑区域的大小，即定义的区域无效 scroll总是显示滚动条 hidden没有滚动条，超出区域的内容不可见 auto根据内容自动判断是否添加滚动条...却省值，没有DIV滚动条，根据内容自动扩撑区域的大小，即定义的区域无效 scroll总是显示滚动条 hidden没有DIV滚动条，超出区域的内容不可见 auto根据内容自动判断是否添加滚动条【编辑推荐

7.2K2 0

【Web前端】CSS溢出

在 CSS 中，“溢出”（overflow）指的是内容超出其包含块的边界时的处理方式。当一个元素的内容超出其设定的宽度或高度时，我们需要采取措施来管理这些超出部分的内容。...scroll：溢出的内容会显示滚动条，允许用户滚动查看超出部分的内容。 auto：根据需要自动添加滚动条。如果内容超出容器，则显示滚动条；否则，不显示滚动条。...div> div> .container 元素的 overflow 属性设置为 auto，在内容超出容器边界时，自动显示滚动条。...以下是一些建立 BFC 的常见方法：设置 overflow 属性：当 overflow 属性值为 hidden、scroll 或 auto 时，元素会创建一个新的...div> div> .container 元素设置了 overflow: auto，确保当内容超出容器宽度时，用户可以通过滚动条查看所有内容

1010 0

你会用到的 15个前端小知识

: hidden; 3.IOS 手机容器滚动条滑动不流畅 overflow: auto; -webkit-overflow-scrolling: touch; 4.修改滚动条样式隐藏 div 元素的滚动条...边角，即两个滚动条的交汇处 div::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件注意此方案有兼容性问题，一般需要隐藏滚动条时我都是用一个色块通过定位盖上去，或者将子级元素调大...，父级元素使用 overflow-hidden 截掉滚动条部分。...我也忘记我在什么情况下用到过了，后面想起来再补吧。 11.calc 这是一个 css 属性，我一般称之为 css 表达式。可以计算 css 的值。最有趣的是他可以计算不同单位的差值。...用法如下，通过 new 的方式创建对象，第一个参数是被拦截的对象，第二个参数是对象操作的描述。实例化后返回一个新的对象，当我们对这个新的对象进行操作时就会调用我们描述中对应的方法。

9311 0

css控制滚动条透明,CSS控制滚动条样式的解析

我们在之前的两篇文章中，我们给大家介绍了关于CSS设置div滚动条样式、以及CSS3自定义滚动条样式的实例，都知道当内容超出容器时，容器会出现滚动条，那我们如何使用CSS控制滚动条样式的呢？...例子：/*作为IT界最前端的技术达人，页面上的每一个元素的样式我们都必须较真，就是滚动条我们也不会忽略。...2、其中的内容高度必须超过它本身的高度。 3、必须添加属性 “overflow：auto”。...使用该值时，无论设置的”width”和”height”的值是多少，其中的内容无论是否超出范围都将被强制显示。 overflow：auto；在需要时剪切内容并添加滚动条。...overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置以上属性设置的值为visible、scroll、hidden

6K2 0

蒙层禁止页面滚动的方案

实现首先需要实现一个蒙层下滚动的效果示例，当我们点击弹窗按钮显示蒙层之后，再滚动鼠标的话能够看到蒙层下的页面依旧是能够滚动的。...，即打开蒙层时给body添加overflow: hidden;，在关闭蒙层时就移除这个样式，例如思否的登录弹窗、antd的Modal对话框就是这样的方式。...这种方案的优点是简单方便，只需添加css样式，没有复杂的逻辑。...，所以在设置这个样式的时候滚动条会消失，而移除样式的时候滚动条又会出现，所以在视觉上是会有一定的闪烁现象的，当然也可以定制滚动条的样式，但滚动条样式就是另一个兼容性的问题了，还有同样是因为裁剪。...值，这样就可以得到一个兼容移动端与PC端的较为完善的方案了，当然对于浏览器的api兼容性是使用document.documentElement.scrollTop控制还是window.pageYOffset

6.4K2 1

清除浮动的几种方法

，而 overflow 被广泛使用的原因，我想应该在于，在触发 BFC 或者 hasLayout 的同时，对元素自身的定位或者表现影响有限。...下面是对使用 overflow 的几个属性值来清除浮动时，它们之间的差异性。...width: 100%; } 以上使用的是overflow:auto，下面几点值得我们注意： 1....使用除了 overflow 的默认值 visible 以外的值auto hidden scroll 均可清除浮动。当然，使用 scroll 的话滚动条是会一直显示的。 2....在使用 auto 或者 hidden 时，需要保证容器的高度为自适应(即不显式定义height)；此外浮动元素的总宽度应该始终小于容器的宽度。

7592 0

Day7:html和css

清除浮动的方法额外标签法,在最后一个浮动元素后面添加一个空的标签代码: div style="clear: both">div> 使用after伪元素进行清除浮动. .clearfix:after...both div style=”clear:both”>div> // 父级添加overflow属性方法给父级添加： overflow为 hidden|auto|scroll 都可以实现使用...溢出 visible : 不剪切内容也不添加滚动条。...auto :超出自动显示滚动条，不超出不显示滚动条 hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 不管超出内容否，总是显示滚动条鼠标样式cursor cursor...90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通简书博客：达叔小生 https://www.jianshu.com/u/c785ece603d1 结语下面我将继续对其他知识

1.9K3 0

如何使用 CSS 设置和自定义水平和垂直滚动条

overflow-y属性接受两个值之一：scroll或auto。将属性的值设置为scroll会指示浏览器始终向容器添加滚动条。无论目标容器是否有超出其边界的内容，容器始终会有一个滚动条。...另一方面，如果将overflow-y属性的值设置为auto，则浏览器只有在目标容器有超出内容时才会添加滚动条。...将overflow-y属性的值设置为auto后，如果没有内容超出容器的边界，浏览器将隐藏滚动条。恭喜您！您已成功创建了一个垂直滚动条。如果需要的话，可以休息一下。...">6div> div class="box">7div> div>页面在屏幕左下角有一个默认的水平滚动条，但您不希望网站的用户使用它。...可滚动的容器在上一节中，我们通过将overflow-y属性的值设置为scroll来添加滚动条。您可以猜到这将是什么。你猜对了。属性名叫overflow-x。

1.9K0 0

小智在这3年开发中遇到的 CSS 问题及解决方案，有大佬帮他总结好了！

跟踪所有这些差异很困难，因此，我整理了一些常见问题及其解决方案方便大家查看。 1.重置button和input元素的背景添加一个按钮时，重置它的背景，否则它会在不同的浏览器中看起来不同。.../pe... 2.Overflow: scroll Vs auto 要限制元素的高度并允许用户在其中滚动，可以添加overflow: scroll-y。...这是因为无论内容如何，scroll-y都会显示滚动条，这时候我们可以使用overflow: auto，它只会在需要时显示滚动条。 ?...长单词和链接当在移动屏幕上阅读一篇文章时，一个长单词或内联链接可能会导致出现水平滚动条。使用CSS word-break可以防止这种情况的发生 ?...使用伪元素我经常使用伪元素，它们为我们提供了一种创建伪造元素的方法，主要用于装饰目的，而无需将其添加到HTML中。

3.7K1 0

table固定表头，tbody滚动条样式设置以及填的几个坑

工作中或许会用到 table 表格固定表头， tbody 滚动的效果。为了方便我这里直接用的 Bootstrap 的表格样式。 ?...比较常用的方法是，将 table 的 thead 和 tbody 拆分成两个表格，用 div 包起来，给 div 设置固定高度和 overflow: auto; 属性（其实只给 tbody 的 table... div> 此外，要给 table 添加一个 table-layout: fixed; 属性：使列宽由表格宽度和列宽度设定。其他属性参考这篇文章。...注意：因为我直接使用的 Bootstrap ，没有出现问题，如果是原生的表格样式出现对不齐的现象，可以尝试把 div 设置为盒模型： .table-box{ box-sizing: border-box...滚动条轨道 ::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分 ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分

14.2K2 0

html中div加滚动条

大家好，又见面了，我是你们的朋友全栈君。...div 加滚动条的两种方法：一、 div style=" overflow:scroll; width:400px; height:400px;”>div> 记住宽和高一定要设置噢，否则不成的...不过在不超出时，会有下面的滚动条，所以不是最好的选择二、 div style=" overflow-y:auto; overflow-x:auto; width:400px; height:...400px;”>div> 记住宽和高一定要设置噢，否则不成的这样比较好的是，在宽和高不超出时，只是一条线三、说明直接为div指定overflow属性为auto即可，但是必须指定div的高度...，如下： div style="position:absolute; height:400px; overflow:auto"> div> 如果要出现水平滚动条，则： overflow-x:

6.1K2 0

div:给div加滚动条　div的滚动条设置

大家好，又见面了，我是你们的朋友全栈君。...今天做了个例子： div 的滚动条问题：两种方法：一、 div style=” overflow:scroll; width:400px; height:400px;”>div> 记住宽和高一定要设置噢...，否则不成的不过在不超出时，会有下面的滚动条，所以不是最好的选择二、 div style=” overflow-y:auto; overflow-x:auto; width:400px; height...:400px;”>div> 记住宽和高一定要设置噢，否则不成的这样比较好的是，在宽和高不超出时，只是一条线三、说明直接为div指定overflow属性为auto即可，但是必须指定div的高度，...如下： div style=”position:absolute; height:400px; overflow:auto”> div> 如果要出现水平滚动条，则： overflow-x:auto

6.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云