css-grid 相关问题

CSS Grid Layout是一种允许创建网格的W3C技术。它不需要使用浮动,表格,绝对定位甚至flexbox(另一种CSS3技术)来构建各种网格,从简单到复杂。一般情况下,请勿将此标记用于CSS网格系统。

在幻灯片div中定位元素

我正在尝试创建幻灯片,并按照下面的图像示例将文本元素与图像内联。我正在尝试使用显示网格来显示元素,但我一直......

回答 3 投票 2

如何在垂直方向上实现多个元素的网格行?

我有一个两列网格布局,包含高度X和2X的盒子(小提琴,下面的截图)第二个盒子下面有空的空间,足够的空间来容纳盒子3:我想知道它是否......

回答 1 投票 1

在网格中垂直对齐右对齐的导航栏项[复制]

我想使用CSS网格属性创建一个导航栏。目前我有#navbar {身高:60px;显示:网格;辩解项目:正确;填充:20px;背景:红色; }#...

回答 3 投票 0

网格布局图像的高度不相等

我正在使用CSS网格来制作如下所示的布局,但图像的高度不同。我可以通过使用object-fit ... .row1 {display:grid; grid-template-columns:1fr ...

回答 2 投票 0

在CSS网格中缩进

我有一个带4个按钮的标题,我把它分成6列,我想留下第一个和最后一个空,然后将按钮放在中间。 .test {display:grid; grid-template-columns:...

回答 1 投票 2

CSS网格动态行和列

我想使用CSS网格创建一个表格下面的表格(绘制得很差但得到消息)表格:我会解释。假设标题单元格大小为2x / 2y。每个标题......

回答 1 投票 1

从React props更改样式化组件中的css变量

我正在使用CSS网格来创建动态表。列和行的数量是动态的,并且基于我从React中的更高组件获得的道具。如何在...内更改css变量?

回答 1 投票 0

如何在 CSS Grid 中使 div 高度等于宽度

我正在使用 CSS 网格布局缩略图库,没有 Javascript 或任何其他响应技术。我想将缩略图的高度设置为其宽度 (1:1) 的平方比。 为什么?当...

回答 4 投票 0

在CSS网格单元格内定位/填充对象

我正在创建定价卡,其中每张卡都是一列1行6行。我需要在文本单元格周围放置填充,以便它们的内容不会触及边缘。我可以应用内联样式......

回答 3 投票 0

调整列的大小而不会溢出

我希望我的嵌入列首先以50/50间距开始,然后能够调整它们的大小而不会溢出包含它们的列。我得到的是初始列...

回答 1 投票 0

PrismJs没有溢出CSS Grid

我有一个页面布局,右侧是弹性内容div和固定宽度列。为此,我有以下基本结构: ...

回答 1 投票 2

当其他曲目增长时,CSS网格的轨迹不会缩小[重复]

在下面的代码中,为什么当其他单元格被放大时,网格跟踪单元格不会动态缩小?在代码段中,如果您将鼠标悬停在任何轨道区域上,则该单元格会增长到...的75%

回答 1 投票 3

更改点击事件的网格布局

是否可以更改点击事件的网格布局?我有一个三行的网格显示,我希望在单击行中的项目时将网格更改为三列。 .gridcontainer {...

回答 3 投票 1

CSS网格:居中和重叠的困难

我正在尝试创建一个简单的计算器,仅使用HTML和CSS进行布局,最终使用纯JavaScript来实现这些功能。我希望网站/页面能够响应,这就是我使用CSS的原因...

回答 2 投票 0

无法为React应用程序进行多个引导程序自定义

我有一个React应用程序。在这个应用程序中,我有两个很大的独立部分,让我们称它们为A部分和B部分。对于我想要的每个部分,我都有不同的SCSS规则,而且我也想...

回答 1 投票 0

控制CSS网格布局中图像的大小

我有一个CSS网格布局,有一堆区域和一个照片容器。我不知道如何:控制照片的大小,使其包含在网格区域内保持宽度...

回答 3 投票 12

CSS Grid - 当我调整到较小的屏幕时,为什么我的文本会被切断?

就像标题所说的那样,当我检查并查看较小的设备尺寸时,屏幕上最右边的文字只会被切断。这是我的HTML:* {margin:0; } 身体 { ...

回答 2 投票 0

如何修复CSS Grid Layout的跨浏览器兼容性?

我已经成功创建了一个CSS Grid布局。但是,现在我想为非支持或支持不良的浏览器添加支持或后备,特别是IE11。我添加了浏览器前缀并阅读了...

回答 1 投票 0

如何在CSS网格中为行和列设置相等的边距?

我有这样的容器#container {display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));这些项目.picture_tile {width:200px; ...

回答 1 投票 0

在网格区域中对齐多个项目

我从Web开发开始。我有一个问题,我想放置一个时间线的twitter,facebook,嵌入youtube等。一个在另一个下面的网格区域。出于某种原因,这些是下一个......

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.