腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
1
回答
CSS栅格不会填充整个视口
css
、
css-grid
我是新手使用CSS网格。我已经布置了一个简单的页面,其中包含一个网格布局和三个div。我将网格(参见css代码中的".grid“类)设置为100vh和100vw,但当我在Firefox (版本56)中查看此设置时,它会在右侧和底部同时放置垂直和水平滚动条,并且网格实际上不会充满整个视图屏幕。 下面是html代码: <!doctype html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>Welcome to Project&
浏览 88
提问于2018-08-14
得票数 -2
1
回答
使CSS网格填充CSS Flexbox列中的所有可用空间
html
、
css
、
flexbox
、
css-grid
我正在建立一个新的网站,当我这样做的时候,我想我应该尝试一些新的技术,看看它们在实践中是如何工作的。 我有一个两栏网站,使用Flexbox进行布局,在左边的栏中,我有四个网格使用CSS网格。 我想要做的是让所有四个网格方块填充Flexbox列中所有可用的空间,但我无法在我的一生中想出如何做到这一点。 这是我的CSS: #flex_wrapper { display: flex; flex-direction: row; } #main_content { display: flex; flex-direction: column; flex-grow:
浏览 0
提问于2018-03-21
得票数 1
回答已采纳
1
回答
当使用网格自动行时,如何使css网格增长到包含一个柔性盒?
css
、
flexbox
、
css-grid
在下面的代码页中,您将看到css网格中有一个柔性盒。如您所见,柔性盒div的内容正在网格的其他部分下溢出。 如果我删除CSS grid-auto-rows:100px;,那么柔性盒内容就不再溢出。但是,我真的希望其他css网格项是100 be高,除非它们的内容太高而不能包含在100 be中。 如何使所有css网格项默认为100 of高,同时让任何内容高于100 of的项增长以容纳所有内容? * {box-sizing: border-box;} .wrapper { display: grid; grid-auto-rows: 100px; } .wrapper >
浏览 0
提问于2018-09-11
得票数 1
回答已采纳
1
回答
如何使用CSS Flexbox弹出多种高度/大小的框
html
、
css
、
flexbox
我试图使用CSS flexbox来设计一个在一个div中包含图像的网格,它将占用父div的全部长度,然后在div旁边的一个2x2网格中有四个div,如下所示: 我目前正在尝试构建这个框架,但是一直遇到处理创建div 1旁边的2x2网格的问题,因为我无法让网格始终以2x2的形式显示,也不能让其中的每个div根据div 1的大小动态地分割剩余的页面宽度。 我目前正在工作的代码如下: #intro-section { padding-top: 16px; padding-left: 32px; display: inline; } .flex-conta
浏览 1
提问于2019-12-01
得票数 0
回答已采纳
2
回答
多宽柱柔性箱格网
html
、
css
、
flexbox
我有一个4列柔性盒网格,用于显示产品。所有产品的宽度都是25%,但是如果只有一个产品的宽度为75%,那么如何确保网格不会中断,这样我就可以在一行中显示两个产品? 是否有一种方法,使用柔性盒,给予更广泛的75%的网格项目优先级,以便它自动调整/移动网格,以确保它不会像现在那样中断? jsFiddle (代码位于底部) 这就是我想要达到的目标: CSS .grid-uniform { display: -ms-flex; display: -webkit-flex; display: flex; flex-wrap: wrap; margin-left: -20px
浏览 2
提问于2017-10-19
得票数 0
回答已采纳
3
回答
如何防止内容调整flex项目的大小?
html
、
css
、
charts
、
flexbox
我正在使用CSS flexbox来构建一个可伸缩的、响应式的网格。当将Google图表应用于其中一个flexbox项目时,该项目的大小会发生如此微小的变化。这足以使网格失去对齐。我把下面的图片放在一起来帮助说明这个问题。 将Google chart应用于项目6之前的Flexbox网格: 将Google chart应用于第6项后的Flexbox网格: Flexbox网格的加载速度比Google图表快,因此网格最初是正确加载的。但是,当图表加载时,项目6会略微扩展,从而产生上面的图像2。 中间列flex容器和第6项div在css中的设置如下: #middlecolumn {
浏览 0
提问于2016-03-29
得票数 16
回答已采纳
4
回答
使用CSS设计每秒钟、第五、第八项的样式?
html
、
css
、
css-selectors
我有个div里面有一些条目。它是一个3列3行网格: 我的元素按照这个顺序使用flexbox: 1 2 3 4 5 6 7 8 9 我想要找到css选择器样式的第2,5,8(等等)元素。 这是一个标志网格。每个数字代表一个徽标元素,但也可以用于其他任何东西。 <div class="entries-wrapper"> <div class="entry"> <img class="logo" src="/src/img/logo-1.svg"> </div> &l
浏览 0
提问于2019-08-27
得票数 1
回答已采纳
2
回答
我希望在不使用flex和网格的情况下将多列创建为两个列布局。
html
、
css
、
laravel
、
dompdf
我需要在不使用flex和网格的情况下将多个列创建成两个列布局。因为我在laravel中使用dompdf插件。dompdf不支持网格和flex。因为它不支持css v3,所以请给出css2(没有flex和网格)的布局设计,.I不喜欢表格格式,因为两列布局可能有或可能没有相同的高度。这就是为什么它必须调整下一个div.Thanks占用的高度和空空间的原因。
浏览 10
提问于2022-03-09
得票数 -1
回答已采纳
1
回答
CSS:如何用CSS选择器有条件地将显示网格更改为flex?
css
、
vue.js
、
flexbox
、
css-selectors
、
css-grid
我有一个由Vue中v-for循环中的元素填充的网格。此外,我有一个搜索栏,根据输入减少网格元素。如果元素计数超过3,那么它看起来很棒,但是当我只剩下2个元素时,它就太间隔了。因此,我想更改display: grid;display: flex;如果网格中的元素小于3。 我尝试过CSS选择器,也许我做错了什么,因为我对编程相当陌生。我知道如何使用javascript添加动态类,但是,我想看看是否可以使用普通的CSS。 尝试了以下css选择器及其变体: .grid-container { display: grid; grid-template-columns: repeat( a
浏览 1
提问于2019-06-30
得票数 5
2
回答
使字形网格在角度上保持100%的页面高度的方法
css
、
angular
、
height
、
ag-grid
我试图使角度ag-grid来获取网页的全部高度,所以如果我有一些组件,比如ag-grid的文本或标题,我想要使显示的网格获取页面的全部高度。 我看过关于堆栈溢出的问题: 然后我试着把这个应用于角ag-grid网格 下面是我应用的css,但它没有提供所需的结果: body, html { height: 100%; margin:2px; } my-app .container { display: flex; flex-direction: column; } my-app .container .ag-grid-angular { flex-basis: 100%
浏览 2
提问于2018-05-14
得票数 4
回答已采纳
1
回答
使CSS网格上的项成为超链接
html
、
css
、
flexbox
、
css-grid
我正在使用CSS网格。我想,如果我将一个网格项封装在一个a标记中,就可以将一个网格项放到一个超链接中。但我看得出来,这个解决办法行不通。 整个网格由大约30个由CSS网格组成的网格元素组成。因此,用flex盒构建网格并不是一个好的解决方案。 有人知道我如何把整个网格列变成超链接吗? .item2 { grid-row: 1 / 1; grid-column: 7/13; height: 340px; display: flex; justify-content: flex-end; flex-direction: column; background-image
浏览 1
提问于2019-03-03
得票数 1
回答已采纳
1
回答
Flex布局中的动态列宽
html
、
css
、
flexbox
我正在尝试创建三列网格,我希望它能够使用Flex进行响应。使用CSS,如下面的小提琴链接所示,我能够得到相当响应的布局。问题是,当调整大小时,第二列(蓝色的)并没有缩小,相反,所发生的是黄色列正在消失。例如,请参见下面的gif: 当我调整大小时,如何使蓝色盒子变小,这样黄色盒子就不会消失? 这是我使用的CSS: .container-main { margin: 50px; } .box-container { display:flex; //align-items: flex-start; background-color: #cccccc; align-
浏览 0
提问于2018-11-27
得票数 0
回答已采纳
1
回答
电子邮件模板的内联样式,使其类似于从col-md-6到col-12的引导网格
html
、
css
目前我想使电子邮件模板,我通常是使我的电子邮件模板与每个内容/行,但这一次我必须做一个电子邮件模板,它有2列在桌面上,并将其更改为1列在移动,完全像引导网格,如果你这样应用它:<div class="col-12 col-md-6"></div>,但由于我使用媒体查询,当我发送电子邮件时,显然样式不起作用,因为你只能使用内联的电子邮件模板和由于媒体查询不能在内联风格,我的模板变得崩溃,有人能帮我解决这个问题吗? 这是我的css代码行: .col-md-6 { display: flex; flex-flow: column wrap;
浏览 29
提问于2020-10-17
得票数 0
1
回答
当使用“对齐内容:间隔”和粘性标题时,CSS网格项溢出网格容器。
html
、
css
、
safari
、
css-grid
我有一个基本的布局,在这个布局中,我的CSS网格位于一个flex布局中,这样网格就可以占用除页脚之外的所有可用空间。 标头用position: sticky;定位。 网格中的项目是,而不是,占据了网格中所有可用的高度。 在我的CSS网格布局中,我使用了align-content: space-between;,这样两个项都位于网格的顶部和底部,中间有一些空格。 这在Chrome和FF上看起来不错,但是在Safari (Mac & iOS)上,第二个网格项被放置在网格之外(根据我的粘性标题的高度)。 body { margin: 0; padding: 0; font-f
浏览 1
提问于2019-01-15
得票数 2
2
回答
无法在无溢出的柔性网格中设置间隙或边距
html
、
css
、
flexbox
我总是使用CSS网格,但我发现了如何使用flex构建网格,这更符合我的需要:一个全屏两列网格,其可变行数分布在整个窗口中。所以我写了这个: body { margin:0; } container { display: flex; flex-wrap: wrap; width: 100vw; height: 100vh; } box { box-sizing: border-box; background-color: lightgray; border: 2px solid white; width: 50%;
浏览 13
提问于2022-02-27
得票数 0
2
回答
CSS Flex:制作类似网格的布局最准确的方法是什么?
css
、
layout
、
flexbox
、
grid
从设计上看,flex (最初)是一条内容的单线,并不是专门为网格设计的。 我目前使用的是flex-wrap: wrap;,但它并不是真正用于制作网格的--尽管这可能是您尝试创建网格的第一个选择。 此外,我认为这不是创建类似网格的布局的唯一方法。 那么,这是最准确(恰当)的方法吗?在flex中创建网格? 还是有更好的选择? 编辑(在发布了2个答案之后):为了澄清,我不是在寻找display: grid;,我只是问在flex中做这件事最合适/最准确的方法是什么。(见) (当然,display: grid是使用CSS网格生成网格的正确方法。这是而不是提出的问题。)
浏览 4
提问于2021-05-04
得票数 0
3
回答
在CSS网格中,对自我、对项和对齐内容之间有什么区别?
css
、
css-grid
我真的很困惑。在查找在线资源和文档时,这些属性的大多数文档似乎引用的是Flex-box,而不是网格。我不知道Flex-box中的等价属性的文档如何适用于网格。 因此,我尝试引用,它将它们定义为: 对齐项-项-沿行轴对齐网格项中的内容。 justify-content -此属性使网格沿行轴对齐。 自定义()--沿行轴对齐网格项中的内容。 但我还是不明白他们之间有什么区别。所以,我有三个问题要澄清。 Flex-box中的justify-items属性与网格中的justify-items属性相同吗?或者他们有什么不同?(换句话说,我可以为Grid重用Flex-box文档吗?) (合理的)内容
浏览 0
提问于2018-01-31
得票数 103
回答已采纳
1
回答
css flex-box和react本机在flex中的区别:1属性
css
、
react-native
、
flexbox
我发现css flexbox flex属性,即flex:1不像react一样工作--本机flex:1。它在react原生网格系统中的工作方式不同。需要帮助去理解 挠曲:1 作为反应-本土的观点。
浏览 1
提问于2018-08-21
得票数 1
1
回答
CSS网格布局卡的中心化
html
、
css
、
css-grid
在我做了一些帮助,一些CSS网格布局,他们以及网络响应和移动,我有一个问题来集中这些卡。我尝试了说明内容:在网格容器上居中,但没有成功!有线索吗? 我还附上了一张照片 在css和html代码下面 .grid { display: grid; grid-area:test; background-color: blue; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 20px; align-items: stretch;
浏览 1
提问于2020-10-15
得票数 0
回答已采纳
2
回答
在CSS中使用Flexbox/Grid使图像在移动设备上堆叠
html
、
css
、
responsive-design
我正在尝试掌握CSS3中的网格布局。我想写一些HTML/CSS,使我的3x1网格在移动设备上查看时可以堆叠。现在,正方形一直在缩小,直到它们变小。我以前已经能够使用移动CSS,但使用网格对我来说还是个新鲜事。有没有人能提供一些建议或建议? 下面是我的代码: HTML: <div class="container"> <div class="grid"> <div class="cell"> <img src="https://www.easycalculation.com/area
浏览 0
提问于2018-04-26
得票数 0
3
回答
Flexbox大小均匀的元素与内容无关
css
、
alignment
、
flexbox
如何使每个正方形大小相同? x- 我正在使用柔性盒创建网格布局。大多数网格单元格没有内容,有些网格单元格确实有内容。当一个单元格有内容时,它会抛出所有内容。如何确保所有单元格都是均匀的,而不管内容如何? HTML 我有三排,每一排都有三个细胞。只有中间单元格的中行包含子单元格。 <div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div&g
浏览 0
提问于2015-08-09
得票数 30
回答已采纳
4
回答
Angular Material 6网格列表对齐项目和对齐内容至flex-start
css
、
angular
、
angular-material
我正在尝试使用角度材质6动态网格列表。与文档相关的示例将网格的内容放在每个平铺的中心。请参见示例 我想把内容放在每个瓷砖的左上角。 我已经尝试了以下css,但不起作用。 .mat-grid-tile .mat-figure { justify-content: flex-start; align-items: flex-start; }
浏览 0
提问于2018-08-20
得票数 15
回答已采纳
1
回答
柔性盒模型解释
html
、
css
、
flexbox
我正在学习CSS3的柔性模型。我查看了,我想我得到了一般的概念,但我不明白下面的属性是如何工作的: flex :CSS flex属性指定flex基,它是flex项的初始主尺寸。 flex-grow :CSS flex - grow属性指定flex项的flex因子。 flex -:CSS flex -属性指定flex项的flex收缩因子。 我还试图修补连接在MDN上的沙箱和,但我仍然没有被点亮。 你能详细解释一下这些属性以帮助理解它们的含义吗?
浏览 2
提问于2013-08-13
得票数 0
回答已采纳
2
回答
自对齐不能用作显示:未检测到网格
css
、
css-grid
我正在测试css (css-grid),下面是代码: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> html, bod
浏览 2
提问于2020-12-14
得票数 0
回答已采纳
2
回答
css -使用网格自动列创建动态宽度。
html
、
css
、
flexbox
、
css-grid
我试图让我的css网格要么是每一行两个块(如果有足够的项),要么是一个跨越整个宽度的块。然而,我似乎无法让它使用网格-自动列。 顶部块是我想要它看起来的样子,底部块是我当前css正在创建的。 .flex1 { display: flex; flex-direction: row; flex: 1; } .grid1 { display: grid; grid-auto-columns: minmax(50%, 100%); } div.height { height: 50px; width: 100%; } .red { background-col
浏览 0
提问于2018-12-16
得票数 2
回答已采纳
2
回答
自举网格怀疑
css
、
twitter-bootstrap
我真的不能再想别的了,这让我很困扰。 为什么boostrap.css中的网格对.col-sm-*, .col-md-*等有不同的媒体查询,而内部的flex: ;和max-width: ;对所有这些网格都是相同的?! 为什么他们不使用“通配符选择器”,并将其定义一次? 就像这样: [class*="col-1-"] { flex: 0 0 8.333333%; max-width: 8.333333%; } [class*="col-2-"] { flex: 0 0 16.666667%; max-width: 16.666667%; } 而不是 .col-sm-
浏览 0
提问于2017-09-02
得票数 0
回答已采纳
2
回答
挠曲的增长和宽度之间的不一致
css
、
flexbox
我正在玩Flexbox,试图从根本上学习Flexbox。我对在flex项上独立使用flex-grow和width的结果不一致感到困惑。 假设我有以下HTML: <div class="flex-container"> <div id="flex-item-1">1</div> <div id="flex-item-2">2</div> </div> 和下列CSS: .flex-container { display: flex; } /* Within #fl
浏览 2
提问于2020-04-08
得票数 2
回答已采纳
2
回答
在同一个容器中用不同高度对齐挠曲项
html
、
css
、
flexbox
我想知道是否有可能在同一个容器中使flex项目水平地对齐到较大的flex项。使用CSS浮动可以很容易地完成它,但是我还不能用flex项来完成它。 网格布局 <div class="flex-container"> <div class="large-flex-item"> </div> <div class="small-flex-item"> </div> <div class="small-flex-item"> </div> <
浏览 1
提问于2015-12-03
得票数 7
回答已采纳
1
回答
使网格项使用剩余空间,如flex项和flex增长:1
html
、
css
、
css-grid
在柔性盒中,我可以指定柔韧生长:1对一个孩子说,它应该占用剩余的空间。 html, body { height: 100% } <div style="display:flex;flex-direction:column;height:100%"> <div style="background-color:yellow;height:50px"></div> <div style="background-color:red;flex-grow:1"></div>
浏览 2
提问于2018-05-14
得票数 3
1
回答
如何在MaterializeCSS中将cols放在行的中心?
html
、
css
、
materialize
我正在尝试使用MaterializeCSS创建一个网格,并且应该将每个col放在row的中心,但现在cols都从row的左侧开始。 我在row中添加了一个display:flex,但它实际上破坏了响应性,这意味着如果我挤压浏览器的宽度,我观察不到row & col的响应性。 代码如下,请帮助。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" /> &
浏览 0
提问于2020-05-13
得票数 2
2
回答
使用ExtJS 5网格单元宽度计算错误
grid
、
width
、
cell
、
extjs5
在从4.2.1升级到ExtJS 5之后,我发现了一个网格单元格宽度计算问题或似乎是一个问题。 下面是列的示例 columns: [ { header: 'One', dataIndex: 'one', flex: 2 }, { header: 'Two', dataIndex: 'two', flex: 2 }, { header: 'Three', dataIndex: 'three', flex: 3 } ] 标头按预期填充网格宽度,但网格单元格宽度不等于标头的数量分别为
浏览 2
提问于2014-07-24
得票数 2
回答已采纳
2
回答
CSS网格-从flexbox布局转换
html
、
css
、
flexbox
、
css-grid
我正在尝试实现以下布局使用CSS网格… ? 我目前使用flex来生成它,如下所示。 .row1 { display:flex; } .row1 .item { background:red; width:50%; padding:20px; margin:10px; color:white; text-align:center; } .row2 { display:flex; } .row2 .item { color:white; text-align:center; background:red; width:33%; pad
浏览 19
提问于2019-04-03
得票数 2
回答已采纳
1
回答
flex box和Bootstrap在手机上不能协同工作吗?
css
、
twitter-bootstrap
、
google-chrome
、
mobile
、
flexbox
将CSS规则display:flex应用于引导程序行似乎会将引导程序列宽的控制权从引导程序中夺走。例如,如果我有一个类为col-md-9的列,它在Android Chrome浏览器上的宽度只有它包含的文本的宽度,而不是根据Bootstrap网格规则占用75%的屏幕宽度。 这种行为的根本原因是什么?如何避免?
浏览 0
提问于2015-12-05
得票数 0
1
回答
Shopify产品网格-不对齐一行
css
、
shopify
、
liquid
我有一个常规的Shopify收集产品网格,如下所示: 我想让它看起来更像这个提要(例如,Pinterest样式的网格,消除了产品1、2、4和5下的空白): 现在在我的网格css下面: .grid { display: flex; flex-wrap: wrap; margin-bottom: 2rem; padding: 0; list-style: none; column-gap: var(--grid-mobile-horizontal-spacing); row-gap: var(--grid-mobile-vertical-spacing); } @m
浏览 8
提问于2022-07-06
得票数 0
2
回答
为什么当我改变一个网格来弯曲它不起作用?
html
、
css
、
sass
我正在进行一个基于网格容器的挑战,这个网格包含3张卡片,它们被水平显示。 问题 我有一个名为.格栅容器的类,它具有以下CSS属性: display: grid; grid-template-columns: repeat(3, 1fr); 所以在我的媒体查询中,我这样做了: @media only screen and (min-width: 320px) and (max-width: 900px) { .grid-container { display: flex; flex-direction: column; } } 正如您所看到的,我将网格更改为具有列方向
浏览 11
提问于2022-08-06
得票数 0
回答已采纳
1
回答
ui-网格高度正在覆盖我的css
html
、
css
、
angular-ui-grid
、
ui-grid
我正在尝试使用flexbox让ui-grid填充我的容器。 <div style="width: 100%; height: 400px; display: flex;"> <div ui-grid="gridOptions" style="flex-grow: 1"></div> </div> 我也尝试过在top、left、right、bottom =0的情况下使用绝对定位,结果也是一样的错误。 网格似乎是在内部设置高度,而不是监听html/css。 我已经尝试用以下命令覆盖ui-grid c
浏览 11
提问于2017-02-24
得票数 0
2
回答
如何使网格中的列“空间均匀”,就像柔箱一样?
javascript
、
css
、
css-grid
、
grid-layout
我有这个网格CSS .grid { display: grid; grid-column-gap: 50px; grid-template-columns: repeat(3, 1fr); } 它位于宽度为500 is的div中。 但我注意到,网格中的第一项“拥抱”了div的左侧边缘,但最右边的项没有触及div的边缘。 在flexbox中,我可以通过(足够接近)实现这一点: .flex { display: flex; justify-content: space-between; } 如何对网格进行响应性处理? 我知道我可以改变网格-列-空隙,但这似
浏览 2
提问于2022-01-19
得票数 1
回答已采纳
1
回答
为什么youtube在首页的视频卡布局中使用flex?
html
、
css
、
flexbox
、
frontend
、
css-grid
我正在学习css的布局,并逐渐认识到flex用于一维对齐,而网格用于2-D对齐,但为什么youtube使用flex作为视频卡的网格(第一页https://www.youtube.com/),有什么好处吗?) ytd-rich-grid-row #contents.ytd-rich-grid-row { width: 100%; max-width: calc(var(--ytd-rich-grid-items-per-row) * (var(--ytd-rich-grid-item-max-width) + var(--ytd-rich-grid-item-margin)));
浏览 9
提问于2022-10-27
得票数 0
1
回答
CSS网格删除空的未使用的空间
css
、
css-grid
我试图在CSS中创建一个带有网格属性的导航条。我想要做的就是删除空的网格空间,以使设计看起来更好。 下面是最初设计的样子: 我希望通过使用以下代码使其响应: .nav { display: grid; grid-gap: .25em; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .nav-child { width: 100%; text-align: center; border: 1px solid black; } <div class="secondary-fl
浏览 1
提问于2018-09-17
得票数 3
回答已采纳
1
回答
显示/隐藏网格-模板行的空内容或如果网格区域未呈现
css
、
reactjs
、
css-grid
、
show-hide
display: grid; grid-template-columns:var(--side-bar-width) 1fr; grid-template-rows: 60px 1fr 90px; gap: 0px 0px; grid-template-areas: "Sidebar Header" "Sidebar Body" "Player Player"; 我有三个组件,每个组件呈现一个div,类名为 .Body { ... grid-area: Bod
浏览 2
提问于2021-05-22
得票数 0
回答已采纳
1
回答
为什么这些边界会重叠?
css
使用CSS,这些边框在底部重叠。我正在使用outline属性。我在网格中显示图像,但希望网格有边框。我不会提前知道网格中有多少项,可能有1个,可能有2个,3个,14个等等。 这是我的CSS .products {display:-webkit-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;width:100%;margin-top:75px;} .product {outline: 1px solid rgba(0,0,0,.1);width:33.33%;display:-webkit-box;display:-ms-flexbo
浏览 0
提问于2018-06-30
得票数 0
3
回答
将四个div的网格展开,以匹配最高的高度。
javascript
、
jquery
、
css
、
flexbox
我正在尝试创建一个网格布局,将所有子div大小与组中最高的div匹配。例如,我有一个2x2网格,网格中的每个div都包含一些文本。包含最多文本的div是最高的,应该将其他3 div上的高度推至匹配。 我可以使用display: flex;和flex-wrap: wrap;在每一行上匹配div高度,但是我需要所有行都匹配高度。 这能用CSS实现吗,还是我需要求助于jQuery? <section class="grid two"> <div> <div> <p>The top left
浏览 4
提问于2015-04-22
得票数 2
回答已采纳
3
回答
使用柔性盒(或其他CSS)创建砖石网格
css
、
flexbox
、
multiple-columns
、
css-grid
我想在CSS中实现网格效果,元素都有相同的宽度,但没有高度。我希望下面的元素总是在底部的50 is,不管下一个是什么。 我试过用浮标,但是那个虫子。所以我试着用Flex,但它仍然做不到我想做的事情。 .container display: flex flex-wrap wrap align-content flex-start align-items flex-start 我想要的: 我拥有的:
浏览 4
提问于2017-05-10
得票数 11
回答已采纳
1
回答
高度为1fr的单行网格在Chrome中不填充高度
css
、
google-chrome
、
flexbox
、
css-grid
我在Flexbox列中有一个CSS,网格有flex-grow: 1。 在Chrome中,网格扩展到填充可用空间,但它的内容没有,即使在网格上有align-content: stretch。在Firefox和Edge中,内容按需要扩展到填充网格的高度。 ,以及它在不同浏览器中的外观。这是Chrome的一个bug吗?如果是的话,有人能提出一个简单的解决办法吗? Chrome 火狐 边缘 #wrapper { display: flex; flex-direction: column; height: 15rem; background-color:
浏览 0
提问于2018-01-25
得票数 7
回答已采纳
2
回答
bootstrap 4 flex问题没有填满100%的父高度
html
、
css
、
flexbox
我试图得到一个2列网格与boostrap flex,这需要整个页面的高度。由于某些原因,这段代码并没有填满页面的100%。 body标记的宽度和高度均为100%。我已经包含了下面的代码片段。尚未创建其他CSs。 <div class="d-flex flex-row w-100 h-100 border"> <div class="d-flex flex-column h-100 border "> test </div> <div class="d-flex flex-c
浏览 19
提问于2018-11-24
得票数 1
1
回答
如何使Ext.grid.Panel自动适应其父级的div大小?
extjs
我有一个网格面板如下: Ext.define('Summary', { extend: 'Ext.data.Model', fields: ['A', 'B', 'C'] }); var summaryStore = Ext.create('Ext.data.Store', { model: 'Summary', data: summaries }); Ext.create('Ext.grid.Panel', { rende
浏览 2
提问于2014-01-13
得票数 0
回答已采纳
3
回答
flex容器中居中的按钮太窄
html
、
css
、
flexbox
我的项目使用20行乘20列的css网格布局(每个单元格占屏幕的5%)。其中一个页面有一个按钮。最初,页面包含在网格列5-8和网格行6-9中,按钮本身没有问题,但我需要在网格区域内居中,所以我使用flexbox在css网格中居中。 按钮文本是"Select file to upload“,但问题是按钮现在只有一个单词的宽度;我希望按钮的宽度与所有四个单词的宽度相同。在我添加用于居中的flex容器之前,按钮的宽度与所有四个单词一样宽,但现在使用flex容器,情况就不同了。 对于页面和其他两个页面上的所有其他元素,flexbox排列都很好用,但是这个按钮有这个问题(在Firefox64上)
浏览 4
提问于2018-12-22
得票数 0
1
回答
悬停在类上并修改另一个类
html
、
css
我有一个网格布局,其内部是一个边框,宽度为(64 is ),网格: .container { display: grid; height: 100vh; width: 100vw; grid-template-areas: "sidebar header" "sidebar content" "footer footer"; grid-template-columns: 64px auto; grid-template-rows: 5% 92% auto; background-color: #
浏览 4
提问于2022-05-24
得票数 0
回答已采纳
0
回答
弹性框2x2网格的内部填充和边框
html
、
css
、
sass
、
flexbox
我对2x2有一些问题,我试图使用flexbox来实现。我正在努力实现这样的目标。 每个单独的网格都应该包含相同数量的填充。此外,还需要仅在内部添加边框。(在网格内,就像一个十字) 这是我想出来的代码,但它不能正常工作。 HTML <div class="info-box"> <div class="info-item grid1"></div> <div class="info-item grid2"></div> <div class="info-item gr
浏览 0
提问于2017-12-06
得票数 3
5
回答
使网格容器填充列而不是行
html
、
css
、
flexbox
、
css-grid
我想让我的网格像这样垂直填充: 1 4 7 2 5 8 3 6 9 ... arbitrary number of additional rows. 相反,它像这样水平填充: 1 2 3 4 5 6 7 8 9 我想指定网格中的列数,而不是行数。 这是我的div使用内联CSS样式时的样子: <div style="display:grid; grid-template-columns:1fr 1fr 1fr;"> <div>1</div> <div>2</div> <div>3</d
浏览 82
提问于2017-05-21
得票数 102
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
微信小程序的WCSS相比传统的CSS,最大的优势在于Flex布局
Flex布局教程
香坊区基于网格化的疫情防控平台上线
CSS Grid 布局快速教程
一种基于网格的密度峰值聚类算法
热门
标签
更多标签
云服务器
ICP备案
实时音视频
对象存储
云直播
活动推荐
运营活动
广告
关闭
领券