腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
2
回答
继续滚动不同行数的焦点样式CSS柔性盒多列。
html
、
css
、
scroll
、
flexbox
、
focus
我正在构建一个具有可变列数的布局,每个列都有一个独立的行数。 它不是严格的网格(每一列应该有相同的行数),我将称之为“板”布局。 目标: 用户必须只能水平滚动板,并且只能垂直滚动列:我希望滚动当前的focused列,并防止在整个板的对角线方向上滚动。 当用户到达列的末尾而不是母板时,在列上的垂直滚动必须结束(如果有其他列高于焦点列,则板的高度可能更长)。 我想知道,我是否能够实现这种行为,只有通过CSS -最终也重构html。 你能说明一个可能的解决方案点1,2,仅使用CSS? 这就是我尝试使用flex css解决方案的地方。 所需的布局 列包含不同的行数,并相应地呈现它们的背景。
浏览 1
提问于2020-08-13
得票数 0
回答已采纳
1
回答
如何在使用flex布局进行水平滚动时使行中的第一列粘滞?
css
、
flexbox
、
position
如何在使用flex布局进行水平滚动时使行中的第一列粘滞? .wrapper { display: flex; height: 100vh; overflow-x: auto } .first-column { flex: 1 0 300px; background: gray; } .second-column { flex: 0 0 auto; padding: 20px; overflow: auto; } <div class="wrapper"> <div class="first-column
浏览 0
提问于2017-11-15
得票数 3
2
回答
如何创建反向flex行的可水平滚动的flex列?
html
、
css
、
flexbox
、
overflow
我想要创建一个水平滚动的flex列,它包含几个flex行,但是我想以相反的方式显示每一行。即1,2,3,4,5,6显示为6,5,4,3,2,1。 下面是我尝试的一个JSFiddle: 如您所见,水平滚动条消失。 HTML: <div class="column"> <div class="row"> <div class="box">1</div> <div class="box">2</div> <div class=
浏览 0
提问于2019-07-15
得票数 1
回答已采纳
2
回答
柔性箱流体水平滚动
html
、
css
、
flexbox
我有一个主页(水平滚动网站),将遵循1列1行,1列2行,1列3行,然后循环通过。是否有一种方法可以使用显示flex来瞄准目标,但是没有我使用过的spot和条形类。 如果我们能够删除类,那么在我们的模板中这将更容易遵循。这个网站将水平滚动到,所以需要考虑到的设计。 设计理念: .tiles { overflow-x: auto; overflow-y: hidden; } .tiles-list { height: 100vh; display: flex; flex-flow: column wrap; padding: 0; } .lightbox {
浏览 0
提问于2019-03-04
得票数 3
回答已采纳
1
回答
FF/IE/EDGE行100%高列上的CSS柔性盒垂直滚动条
html
、
css
、
flexbox
我正在构建一个html应用程序,它被加载到第三方应用程序中,用来填充提供给我的应用程序的垂直和水平空间,而不会导致页面级滚动条。为了做到这一点,我大量使用了柔性盒样式,但我找不到以下需求的解决方案,这些需求适用于IE/EDGE和FF的最新版本(Chrome按预期工作)。 要求: 2列布局 LHS列是可用空间的100%高,当其内容比列高时有一个垂直滚动条。 RHS列的高度为100%,可用空间的宽度为100% (我目前已完成此操作)。 LHS和RHS列不能具有“位置:绝对”样式(FF性能问题使HighCharts在容器中具有灵活和绝对定位)或显式像素高度/宽度(需要响应)。
浏览 1
提问于2016-08-17
得票数 0
1
回答
如何让sticky在这种情况下工作?
html
、
css
、
sticky
我希望我的表格的第一行和第一列在屏幕上是粘性的,并且在表格之前还有另一个内容 表格前的内容不能水平滚动,表格必须可以水平和垂直滚动 有没有办法在没有JavaScript的情况下做到这一点? .container { width: 100%; overflow-x: hidden; display: flex; flex-direction: column; background: black; } .fixed-header { width: 100%; height: 100px; color: aquamarine; } .table { po
浏览 22
提问于2021-11-11
得票数 0
2
回答
用柔性盒格式化全页桌面web应用程序
html
、
css
、
flexbox
我正在尝试构建一个使用全高度和全宽度布局的web应用程序,我已经解决了一些问题,但最后一个问题让我感到困惑,我认为这是因为我本可以做得更优雅。我不关心这个应用程序的响应设计。 本质上,这就是我要找的内容:一个有两个列的页面,其中左列是窄的,宽度是固定的,右边的列与视图端口进行调整。在这两列的顶部和底部都有调整大小的区域,这些区域的大小可能会更改。列中间的内容对齐容器的顶部,并在容器溢出时滚动。 在此图表中,方框A和D调整到内容的大小,但固定在页面的顶部。框C和F同样调整到它们中的大小,保持固定在页面底部。B和E中的内容对齐到这些容器的顶部,但如果内容超过框的高度,则会出现滚动条。B和E是唯一应
浏览 4
提问于2020-05-21
得票数 0
回答已采纳
1
回答
水平滚动时保持垂直滚动条的视图
html
、
css
、
html-table
我正在创建一个带有静态标头和最小宽度列的表。这需要两个滚动条:垂直和水平。 现在,垂直滚动条应该只在表行中滚动,因为标头是静态的。 然而,当水平滚动时,行和标头都应该滚动。实现这一点的方法是,有一个容器,它同时包含头和正文,并带有overflow:auto。车身div有溢出-y: auto。 这样做的问题是,由于主体是水平滚动div的子元素,除非您一直向右滚动,否则垂直滚动条是不可见的。 我希望这两个滚动条总是可见的,但仍然只滚动他们的预期内容。 我创建了一个代码库来演示这个isue: 重要的部分是tableContainer和主体: #tableContainer { border:
浏览 2
提问于2017-05-26
得票数 0
1
回答
柔性与溢出:奇怪的行为
html
、
css
、
flexbox
、
overflow
编辑:添加了flex方向:列,在初始代码.中漏掉了它 当子元素有overflow:auto而父元素有overflow:auto时,滚动条就会出现在子节点上。 但是当overflow:auto从parent中删除时,滚动条就会出现在grand-parent上。 html, body { height: 100%; width: 100%; overflow: hidden; font-family: "Roboto", sans-serif; } body { margin: 0; padding: 0; } .App { display: f
浏览 2
提问于2019-07-06
得票数 1
1
回答
Edge/IE挠曲和滚动条问题
html
、
css
、
flexbox
、
scrollbar
、
microsoft-edge
在使用flexbox时,我遇到了Edge/IE的问题。内容可能溢出,所以我使用overflow-x: auto。Flex方向是列,内容项上有flex-grow:1,所以不需要溢出-y。但滚动条位于内容的上方。在考虑滚动条之前,它似乎会计算项的高度。只有当使用flex方向列时,行才会正常工作时才会出现此问题。 下面是对滚动/自动/隐藏溢出-x和-y:的不同组合的操纵。 overflow-x:auto with overflow-y:hidden:水平滚动条隐藏内容。 overflow-x: scroll:解决了这个问题,它在考虑滚动条的同时正确计算高度。但内容可能不会溢出,从而显示禁用的
浏览 3
提问于2016-10-13
得票数 0
2
回答
如何使用水平滚动设置flex项的宽度?
javascript
、
html
、
css
、
flexbox
我正在使用display: flex在桌面视图上做一个3列的布局。 然而,开始在540px和以下,我仍然希望布局为3列,但它应该有一个水平滚动。我能够在white-space: nowrap; overflow-x: auto;中实现水平滚动。我的问题是我发现每个flex项目或列都太宽了。 我想在移动视图上显示1个或多个产品,但同时放一个水平滚动条来滚动第三个产品。 你知道如何为每个flex-item或column设置宽度吗?通过给它150px或任何取决于你的想法。非常感谢您的帮助。谢谢。 .blog-articles-list { display: -ms-flexbox; di
浏览 0
提问于2021-07-21
得票数 3
2
回答
如何溢出-y:在溢出的子级中滚动-x: scroll
html
、
css
、
flexbox
、
overflow
我有以下标记和css: 关键部分是: .grid { border: 1px solid #bdbdbd; display: flex; flex: 1; flex-direction: column; overflow-x: auto; height: 200px; } .grid .grid-body { display: flex; flex: 1; flex-direction: column; overflow-x: visible; overflow-y: auto; } 我希望我的代码在外部div上产生一个水平滚动条,在内部div上
浏览 3
提问于2016-10-20
得票数 2
1
回答
在柔性盒中水平滚动列表,设置宽度为侧边栏的布局。
css
、
layout
、
flexbox
、
horizontal-scrolling
我有一个两列布局与一个标签用户界面在主要部分和一个侧边栏附加到右侧。在较大的屏幕上,主列的宽度是流动的,而边栏的宽度应该设置。在较小的屏幕上,侧边栏应该重新定位在主部分之下,主栏和边栏都是100%宽的。 我正在尝试构建选项卡式UI,以便当主部分不够宽时,它可以水平滚动,以显示其所有选项卡。我遇到的问题是,当屏幕不能容纳所有的选项卡时,侧边栏就会被从屏幕的右边推开,这会触发整个页面上的水平滚动,也不会触发选项卡UI上的水平滚动条。 我假设这是因为flexbox优先于主列中的空间,而不是强制滚动条。 在我的Codepen示例中,我使用的是Bootstrap的网格和移动第一方法。设置1000 29的
浏览 0
提问于2018-06-14
得票数 0
1
回答
行布局中的嵌套列布局
angularjs
、
angular-material
我正在尝试完成一个嵌套的滚动布局,它有一个左边栏和一个水平划分的右容器。以前我使用过,它仍然是非常新的(和buggy)。 给一个 <body ng-controller="AppCtrl" layout="row" layout-fill> <div flex="33" class="blue">left</div> <div flex="66" class="green" layout-fill> <div layo
浏览 0
提问于2015-06-13
得票数 3
回答已采纳
1
回答
创建一个在溢出时水平滚动而不溢出页面的柔性盒。
html
、
css
、
flexbox
我有一个边导航栏和内容在右边的网页。 在内容中,我有一个旋转木马,我想在溢出时水平滚动图像。 以下是一个例子: body { height: 100%; } .container { display: flex; height: 100% } nav { border: 1px solid black; } article { border: 1px solid black; width: 100%; display: flex; } .content { overflow: hidden; } .carousel { flex-wrap: n
浏览 1
提问于2021-07-09
得票数 0
回答已采纳
2
回答
在flexbox布局中指定最小宽度
css
、
flexbox
我有以下基于Bootstrap的Flexbox的布局: <div class="d-flex flex-row"> <section class="left"></section> <section class="center"></section> <section class="right"></section> </div> 这就是CSS: .left { flex: 0 0 360px; } .right
浏览 115
提问于2019-02-14
得票数 1
回答已采纳
2
回答
如何滚动上下文flex
html
、
css
、
flexbox
我有一个简单的网站布局的标题和一个3列的主要部分。中间列应该包含一个冗长的内容,所以我想让它滚动,我不能让它发生。下面是问题的原型: 更新:很抱歉没有提到,但我指的是水平滚动,而不是垂直. html, body { height: 100%; } body { margin: 0; padding: 0; display: flex; box-sizing: border-box; } #layout { display: flex; flex: 1; flex-direction: column; border: 4px solid red; }
浏览 3
提问于2016-04-12
得票数 0
1
回答
不跟随Flex宽度的表的flex
html
、
css
、
flexbox
我在列和行中有一个柔韧的组合,如下所示: 此映像使用以下代码生成: <div class="container"> <div class='header'> THIS IS A TEST CODE WITH TEXT </div> <div class='content'> <div class='leftcontent'> CONTENT OF LEFT SIDE </div> <di
浏览 2
提问于2017-09-26
得票数 1
回答已采纳
3
回答
CSS -水平分区布局
html
、
css
所以,如果我有这样的巢穴 <div> <div></div> <div></div> <div></div> ... </div> 是否可以使用纯 CSS进行动态水平布局? 基本上,这个屏幕只能容纳两个垂直的内容。 因此,这个屏幕可以容纳3个垂直内容。 主体显示固定底部的水平滚动条.屏幕上可能会有更多内容。内容向左流,但当垂直空间满时,将流到一个新列中。如箭头所示,是额外的流。 和都不应该显示垂直滚动条。是有可能的吗?我试过使用display: fle
浏览 6
提问于2014-03-09
得票数 2
1
回答
CSS Flex -我有一个项目列表,可以让它们水平滚动溢出隐藏。
html
、
css
、
sass
、
flexbox
我在一个div里面有三个项目。 这是它的容器需要100%的小部件与水平滚动条。 就像个旋转木马。 .wrapper { display: flex; flex: 1 1 0; overflow-x: scroll; overflow-y: hidden; } .content { display: flex; width: 500px; } .item { height: 200px; width: 100px; margin-right: 10px; } <div class='wrapper'> <div c
浏览 2
提问于2017-11-25
得票数 0
1
回答
停止位置:导致祖先水平滚动的绝对元素
html
、
css
、
overflow
当子体位于屏幕边缘之外时,如何防止元素水平滚动? 我在窗口的右侧有一个,当句柄位于边缘时,它会导致容器元素滚动 相关html: <div id="mainScreen"> <div id="header">Header</div> <div id="content"> <div class="round_sliders"> <div id="leftSlider"></di
浏览 1
提问于2016-03-11
得票数 0
1
回答
具有垂直和水平滚动内容的柔性布局设计
html
、
css
、
flexbox
我有一个固定的页眉,固定的页脚,固定的菜单和滚动内容的柔性盒布局。 由于一些文章和答案,我已经设法使菜单和内容垂直滚动,如预期。 现在,我无法找到如何做同样的工作,使内容水平滚动。水平滚动条总是出现在身体级别。我试过在每个容器上施加一个宽度,但它不起作用。我预计overflow: auto在.layout-content-content div上会水平和垂直溢出,但显然不是那么容易驯服。 对应代码: html, body, .layout-container { height: 100%; width: 100%; } body { margin: 0; } .layout-c
浏览 0
提问于2018-07-30
得票数 3
回答已采纳
1
回答
当到达部分时,从垂直滚动更改为水平滚动
javascript
、
css
我正在尝试做一个网站,有一节彼此对齐,除了一个部分,我希望它的内容是水平对齐,当到达该部分时也要水平滚动。 下面是我可以做的,但水平和垂直滚动都是同时工作的。那么,如何检测该部分是否已到达,以及如何在启动水平滚动时停止垂直滚动? var item = document.getElementsByTagName('MAIN')[0]; window.addEventListener('wheel', function(e) { var percent = 100 * item.scrollLeft / (item.scrollWidth - item
浏览 20
提问于2020-02-27
得票数 3
回答已采纳
1
回答
“边框”不显示其容器的整个宽度
css
我试图在系统中显示一个项目列表。 项目列表允许用户查看每一行的大量信息。用户可以向此视图添加其他列,从而使行更长。 我想要能够滚动的垂直和水平浏览这些信息。添加其他列时,我希望能够水平滚动以查看新信息。 滚动如我所料。但是,这些行的下面都有一个边框。奇怪的是,边框只扩展到浏览器的宽度。当我水平滚动时,边框会被切断: 下面是我的代码的一个基本示例,以演示它的作用: <div style="overflow-x: scroll;"> <div style="border-bottom: 1px solid red; displa
浏览 0
提问于2021-03-19
得票数 2
1
回答
固定元素水平居中减去柱
css
、
css-position
我有一个两列的布局,希望fixed元素在右列水平居中。 当fixed元素不是相对于其父元素而是相对于文档定位时,我该如何实现这一点? 注意:左列的宽度是已知的。右列的宽度是“全宽”。 我使用fixed (而不是absolute),因为元素必须跟随滚动。 .wrapper { height: 200px; display: flex; background-color: green;} .column { width: 300px; background-color: pink; } .content { flex: 1; background-col
浏览 9
提问于2018-02-25
得票数 0
回答已采纳
2
回答
*单词包装:中断词*和/或溢出-x:滚动*在flex项目中不工作
html
、
css
、
flexbox
、
overflow
、
word-wrap
我试图使.log_area中的段落打破单词而不是溢出整个页面,以避免水平页面滚动(如果需要,.log_area中的水平滚动将被接受)。 语句‘单词包装:断词’不起作用。此外,“overflow:滚动”也不起作用。 当我禁用flex容器时,这是可行的。但我需要那个挠性容器。 我怎么才能把这事做好? <html> <head> <style> .content { display: flex; flex-flow: row wrap; } .flexitem1 { background-color: #DDF; flex:
浏览 2
提问于2018-03-26
得票数 1
1
回答
jQuery UI可排序:防止在全高列之间使用连接列表进行水平滚动
css
、
bootstrap-4
、
jquery-ui-sortable
我正在使用Bootstrap v4中的Flexbox构建一个包含两个全高列的web应用程序。这两列都包含一个连接的可排序列表,可以使用jQuery UI Sortable对该列表进行排序。 HTML: <div class="container-fluid h-100 d-flex flex-column p-0"> <div class="row flex-grow-1 p-3"> <div class="row flex-grow-1 p-3"> <div class="col-4 m
浏览 40
提问于2019-04-15
得票数 1
2
回答
如何将蒙版渐变添加到水平滚动条
html
、
css
我正尝试在水平滚动条的右侧应用渐变蒙版,以指示列表水平滚动。我已经创建了一个渐变层作为我的蒙版,但是当滚动时,蒙版会随着导航项水平移动。当用户滚动浏览导航时,我希望掩码保持固定,但不希望将其定位为“固定”,因为我需要将掩码包含在导航容器的宽度和高度内。但是我不确定如何达到这个效果。谢谢你的帮助! .navigation{ display: flex; flex-wrap: no-wrap; overflow-x: auto; background-color: black; white-space: nowrap; position: relative
浏览 23
提问于2020-12-16
得票数 1
回答已采纳
1
回答
在CSS中垂直滚动内容的粘性页脚水平滚动
html
、
css
在我看来,这似乎是圆周的正交,但我还是尝试在这里问这个问题。 我需要以下几点: 标头- 100%宽,固定在顶部 主要内容.固定宽度,垂直滚动内容 . fixed =‘fixed 1’>与内容相同的宽度,固定在底部 滚动条-同时水平滚动内容和页脚 也就是说,底部应该只有一个水平滚动条,它同时滚动内容和页脚,而在内容和页脚之间没有滚动条。垂直滚动条只应影响内容。 (当然,水平滚动条应该是自动的,即只有当内容/页脚宽度大于当前视图端口宽度时才会出现) 我得出的最接近的是以下HTML/CSS: <!doctype html> <html> <head> &
浏览 1
提问于2015-05-04
得票数 2
1
回答
问题: flex数据网格的水平滚动条
apache-flex
、
datagrid
、
flex4
、
scrollbar
我在datgrid中有10列,所以我希望datagrid是水平可滚动的。我得到了mxDatagrid的垂直滚动条(自动生成,没有指定垂直滚动策略),但我没有得到水平滚动条。如何解决这个问题?我正在使用flex 4。
浏览 3
提问于2011-08-30
得票数 0
回答已采纳
1
回答
如何使用flex:1对div内的滚动进行div溢出
html
、
css
、
flexbox
我在<pre>标签中有一些源代码,当浏览器窗口调整大小时,我想滚动这些源代码。预标记包含在flex框中,包含div设置为flex: 1。 如何使代码水平滚动? <div style="display: flex;"> <div style="flex: 1;"> <div style="max-width: 100%; overflow-x: auto; min-width: 0;"> <pre> Lorem ipsum dolor sit amet, con
浏览 1
提问于2021-08-28
得票数 0
回答已采纳
1
回答
删除相对放置的div或将div放在彼此之上的空白,同时保留滚动
html
、
css
、
scroll
、
flexbox
、
css-position
我有一个相当具体的网站设计,我在一个日期/时间尺度上放置水平栏。日期刻度需要水平滚动,而我也可以垂直滚动的条形。 我有以下代码来显示情况: hScroll div需要水平滚动。内容div需要垂直滚动。 html如下所示: <div class="main"> <div class="header"> <div>HEADER</div> </div> <div class="hScroll"> <div class="date
浏览 8
提问于2022-11-19
得票数 0
回答已采纳
1
回答
在水平卡片和滚动条中显示更多内容,如果扩展屏幕尺寸的话
html
、
css
、
bootstrap-cards
我想要显示一张有更多列的水平卡片。如果它超过col-12大小,则还需要在启用滚动条的卡片中显示其余内容。 我的HTML代码: <div class="container-fluid"> <div class="card"> <div class="card-body"> <div class="row flex-nowrap"> <div class="col-2"> Name
浏览 14
提问于2021-03-05
得票数 1
1
回答
在flex中实现特定列的水平滚动条
apache-flex
、
datagrid
、
horizontal-scrolling
如何在flex中实现特定列的水平滚动条?假设我有一个列,其行显示特定呈现的图形组件。如果它超过了列的宽度,那么如何为该特定列设置滚动条?如果我将horizontalScrollPolicy=设置为“on”,那么它将为整个数据集设置水平滚动条。我想为特定的column.Can做这件事吗?
浏览 5
提问于2013-03-02
得票数 0
2
回答
如何安排一个水平滚动条溢出与柔性盒项目?
html
、
css
、
flexbox
我试图安排一个布局,在其中我有一个右手边的酒吧和左边的主要内容区,我有一个项目的列表,固定宽度水平排列。 有不同的数字这些,当他们得到更多将适合的空间允许,我想要一个水平滚动条出现。 碰巧,该列表中的每个项还包含一个标题和一个子项列表,这些子项可能垂直溢出。这也需要一个滚动条。 下面的jsbin显示了我正在尝试的内容,但是在横向安排上失败了。不幸的是,在滚动条出现之前,侧边栏被压缩到一个小宽度。而且,很明显,当我的主标题也开始滚动时,整个视图就会得到水平滚动条。 我怎样才能得到"s“类(参见jsbin)的区域是水平滚动的区域?(这不一定是"s",我一开始就试着做
浏览 5
提问于2016-11-10
得票数 1
回答已采纳
2
回答
在窗口边缘稍微旋转一个div,而不出现水平滚动条。
html
、
css
、
animation
、
rotation
、
display
在一个页面的顶部,我创建了四个盒子/瓷砖,在悬停时稍微旋转(5度旋转)。这些框通过flexbox定位和调整大小,以跨越整个窗口的宽度。当悬停在最右边的框上时,它的右下角从右边的窗口移出,导致一个水平滚动条出现。 我想避免滚动条的出现。我试着为包含这些框的display: none设置<div>,但是这会干扰显示盒子的旋转,因为它在div的边框旋转时切断了它们。我想保持盒子旋转的效果完全可见,同时避免水平滚动条。 下面是我的html和css以及页面的 (请注意,水平滚动条并不总是出现在jsfiddle中,这取决于运行代码的窗口的大小): .banner { margin: 0
浏览 3
提问于2017-07-23
得票数 1
回答已采纳
1
回答
如何使用html和css进行条件垂直换行?
html
、
css
、
flexbox
我是html和css的新手。我想知道是否有可能做到这一点。到目前为止我还没有找到一种方法。我想要将元素排列在一个列中,包装如下 flex-direction: column; flex-wrap: wrap; 但是,我只想在没有水平滚动条的情况下有足够的水平空间来包装元素。否则,我想要一个垂直滚动条和项目在单列中。
浏览 25
提问于2021-02-05
得票数 0
回答已采纳
2
回答
如何在水平滚动网站中跳到页面的某一部分?
javascript
、
html
、
css
、
reactjs
、
jsx
我正在制作一个水平滚动网站,由许多div在className“幻灯片”下制作。我想在导航栏中包括跳过个别幻灯片的按钮。我该怎么做? 这是我的水平滚动网站使用的代码,它用鼠标滚动: //homePage.js <div className='home'> <div className='slidesWrapper'> <div className='slide one'></div> <div className='slide two'></div
浏览 3
提问于2020-08-30
得票数 0
回答已采纳
1
回答
容器div溢出父级,而不是显示水平滚动条。
html
、
css
当容器div太长时,尝试让它显示水平滚动条。相反,容器div本身溢出它的父程序。 这是我的代码: .root { background-color: blue; padding: 5px; display: flex; } .left { background-color: yellow; flex: 0 0 auto; width: 60px; } .right { background-color: green; padding: 5px; } .container { overflow-x: scroll; } .content { b
浏览 1
提问于2018-09-20
得票数 0
回答已采纳
1
回答
是否有可能与柔性盒同时进行“行-反”和“列-反”之类的操作?
css
、
flexbox
、
css-grid
在我编写的应用程序中,我试图创建一个二维网格系统,它可以在任意方向上无限扩展。对于熟悉LabVIEW的人来说,我试图模仿用户在VIs的前面板和方框图中无限期滚动的能力。 使用flexbox,我设法使它在向上、向下和左侧的方向上正常工作,但是向右滚动是有问题的: 网格的工作方式是在固定大小的"viewport“div中嵌套一个可调整大小的”容器“div。 <template> <div class="expandable-grid-viewport" ...> <div class="expandable-gri
浏览 2
提问于2018-05-18
得票数 2
回答已采纳
2
回答
引导模式中的表不适合并且不显示溢出。
html
、
css
、
bootstrap-4
、
bootstrap-modal
我有一个有两列的模态。其中一列包含一个表。但是,表不适合列,需要水平滚动,但我需要使表适合列。另外,我对滚动的问题也有意见。如果项目大于模态的大小,则表应该可以滚动。 这里,示例的链接:- 请将视图更改为tabs(row),以便更容易地查看模态中的列:) <div class="btn-group d-flex"> <button class="btn btn-lg btn-icon btn-primary w-100" data-toggle="modal" data-target="#modal-defaul
浏览 5
提问于2021-07-12
得票数 1
回答已采纳
1
回答
火狐滚动条在使用对齐项时收缩弹性子项: flex-start
css
、
firefox
下面的示例在Chrome中正确呈现,但在Firefox中,“内部”容器不会展开以容纳滚动条,而是创建一个水平滚动条。它是一个bug,还是如何解决这个问题? .line { width: 300px; border: 1px solid red; } .parent { display: flex; flex-direction: column; height: 150px; align-items: flex-start; } .inner { flex-basis: 0; flex-grow: 1; overflow-y: auto; } <di
浏览 3
提问于2022-08-20
得票数 1
回答已采纳
5
回答
Flexbox兼容水平预滚动/代码滚动
html
、
css
、
flexbox
我在引导容器中的pre和code标记中有一些代码,我想要水平滚动。这通常很好,直到我添加了一个柔性盒到我的页面的body,以完成一个粘性页脚。在此之后,当页面变窄(例如用于移动查看)时,code不再水平滚动。 下面是我的代码(请注意,当您缩小窗口时,code的水平滚动条就会消失): html, body { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } code { max-height: 200px; background-
浏览 6
提问于2016-02-04
得票数 17
回答已采纳
1
回答
固定页面不可见区域的div
javascript
、
jquery
、
html
、
css
我有一个网格控件,没有完全显示在页面上,在页面的底部,我有一个水平滚动条,所以你可以看到所有的网格列。在不可见区域中的网格旁边,我有一些网格控件,这些控件必须保持固定,以防网格高度变得太大,这样用户在该页面上就可以随时访问它们。 这是我目前的大致情况: 我需要控件留在页面的最右边的部分,而不是在视口的最右边。这是可能的,还是有更好的方法来做到这一点? 编辑: <div style="display:flex;width:700px"> <div style="height:1000px;width:1000px;backgroun
浏览 0
提问于2015-10-19
得票数 3
1
回答
在flex列中水平滚动div
css
、
flexbox
我似乎不能在flex列中有一个水平滚动的div。 Codepen .container { display: flex; margin: 20px; height: 300px; border: 1px solid blue; } .side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; } .main { padding: 20px; } .scrollable { overflow-x: auto; max-width: 100%; } .long-content { width: 2
浏览 13
提问于2020-04-15
得票数 0
回答已采纳
1
回答
引导网格和Flexbox,具有水平和垂直滚动的一列
css
、
twitter-bootstrap
、
flexbox
、
horizontal-scrolling
我有一个两栏的布局页面,我希望它能满足以下要求: 右边的列可以包含大量的内容数据网格,用户应该能够垂直和水平地滚动这些内容。一次在页面上显示这一切实在是太过分了。左列的宽度很窄,高度很短,应该总是出现在页面上,表示xl屏幕的大小。左边的列有两个必须出现在页面底部的按钮,用于显示xl屏幕大小。页面应该响应平板屏幕大小。在平板电脑上,右边的列应该滑到左边的列下面,并且它本身仍然可以水平滚动。保留垂直滚动条本身也是可以接受的(虽然不是最佳的)。 除了使正确的列可水平滚动外,我还可以使用此方法。如何获得右列的水平滚动? HTML: <!DOCTYPE html> <html lang
浏览 1
提问于2020-04-30
得票数 0
回答已采纳
1
回答
Flexbox不允许列扩展
html
、
css
我正在改进,但在Flexbox和HTML/CSS布局方面还是很新的,如果这是基本的,我很抱歉(看起来是这样,但我找不到任何东西)。 我想有一个2列布局与第二列采取任何空间,它需要它的内容(这是一个侧栏的工具)和第一列占据了其余的空间。我有这个工作,但在我的主要内容部分,我有一些东西是可以调整大小的,当他们水平调整大小时,它会将侧边栏从屏幕上撞下来,并在下面放置一个滚动条,这不是我想要的。我希望内容不能水平调整大小超过列的可用宽度。 以下是我的代码的简化,显示了可重现的示例: <html> <body> <div style="dis
浏览 0
提问于2019-07-09
得票数 0
1
回答
有没有一种CSS方法可以让文本按列水平增长
css
、
layout
、
flexbox
我正在为一个客户工作,他有一个非常好的想法,将水平滚动效果集成到他的一个页面流布局中。这意味着用户会继续向下滚动,但在某些时候,页面开始从右向左移动,而不是从下到上。我是通过ScrollMagic实现的。 因此,当它得到响应时,问题就开始了。当我开始水平滚动时,屏幕现在固定到设备的高度,当页面内容流出时,我需要将页面内容向右扩展,而不是通常的“我的内容只是从底部流出,我可以通过垂直滚动”。 我的第一个想法是在管理内容时手动解决问题。即为移动和桌面内容提供不同版本的内容。但是看起来设备太不一样了,我需要一个CSS解决方案。 我的问题是:你知道如何让内容水平增长吗?像高度自动,但宽度“自动”(不工
浏览 0
提问于2021-02-11
得票数 0
1
回答
圆柱挠曲箱:包裹到宽度限制,然后生长高度?
html
、
css
、
flexbox
我想做一个柔性盒,在这里: 项目按列排列。 只要所有项目都在固定的宽度内,包装就会创建更多的列。 如果项目需要更多的空间,那么在此之后,柔性盒将垂直增长,使用垂直滚动条而不是水平滚动条。 在没有Javascript的情况下,有没有办法做到这一点? 下面做的是正确的事情,直到有太多的项目,但然后它溢出水平而不是垂直。 <div style="height: 100%; width: 100%; overflow-y: auto;"> <div style="display: flex; flex-direction: column
浏览 3
提问于2015-12-20
得票数 5
回答已采纳
1
回答
CSS Flex,如何显示具有自定义顺序和水平滚动功能的列表
html
、
css
、
flexbox
我尽量不用Javascript来解决这个问题。我有一个具有相同宽度的框的列表,但第一个子对象的高度不同; 我使用flex在一行中显示列表,这样我就可以在框之间水平滚动。但在移动分辨率中,我希望flex将第一个元素放在第一行,其余的放在第二行。 如果我将flex-flow设置为wrap,我可以实现,但随后我就松开了滚动。我能找到的最接近的东西是这个,但没有水平卷轴。 来自的 .section { display:flex; flex-flow: row nowrap; overflow-x: auto; overflow-y: hidden; } .home_box{ fl
浏览 41
提问于2018-08-03
得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
在这3年开发中遇到的 CSS 问题及解决方案,有大佬帮他总结好了
最全的实现垂直居中的方法
CSS 布局解决方案
CSS杂谈
CSS布局解决方案
热门
标签
更多标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
活动推荐
运营活动
广告
关闭
领券