cost 67 ms
项目不在网格容器内居中

我无法在 2x2 网格中将标题和文本元素居中。 我已经尝试在父容器“.skills”和子元素“.skills-item”上使用 justify-content/items/self。 另外,请注意网格位于弹性容器内,我不知道这是否与它有关,但我一无所知。 .about { display: fle ...

2022-09-27 21:10:42 0 10
CSS div定位4个div(使用网格)

我有 4 个 div 块,其中包含 1 个 div 内的信息。 如何让它们彼此更接近? 在此处输入图像描述这是代码 ...

2022-09-27 10:56:46 1 25
为什么我需要在 div 中包装 img 才能在其上使用网格?

我有一个关于 CSS 网格的问题。 我记得当我尝试使用 img 作为网格项目之一时无法让我的网格工作,但只要我将它包装在一个 div 中并改为操作 div,它就可以工作了。 有谁知道为什么会这样? 我认为这与需要将网格项作为分组元素(如 div、部分、页脚等)有关。 ...

2022-09-26 15:51:39 2 19
CSS 网格列随着长内容改变大小

我正在使用 CSS 网格构建步进组件。 网格有两行,其列数基于步进器中的步数。 每一步都有一个header和一个body。 每一步 header 都位于第 1 行,并且恰好占据网格的一列。 我已将每个步骤 header 设置为与其内容一样大并拉伸直到达到其兄弟姐妹的最小宽度。 每个步骤的主体从第 2 ...

2022-09-26 14:59:22 2 30
CSS 网格-模板-区域拉伸问题

我做了一个计算器。 为了对齐按钮,我使用了网格模板区域和网格区域。 它应该垂直拉伸相等的按钮,但是它不起作用。 我通过使用覆盖网格和显示区域名称从检查器检查,看起来没有问题,但有问题。 如何垂直拉伸相等的区域? 感谢您抽出宝贵时间。 * { margin: 0; box-sizing: borde ...

2022-09-26 11:08:37 1 25
添加到 CSS 网格

我想继续添加到 CSS 网格,但不想继续重新编号 CSS。 有没有人有任何建议来简化这段代码? ...

2022-09-26 04:29:14 1 13
CSS 网格高度没有按我的预期工作,我在哪里搞砸了?

我目前正在学习 CSS 网格,我的任务是通过将其分解为网格来制作这张卡片。 附件是我想要制作的网格的图片。 实际上有一个更大的网格(css 中的 profile-grid),所有这些卡片都排成一行,这个更大的网格的高度为 255px。 我想让卡片和卡片内的网格跟随这个 255px,我设法让卡片本身 ...

2022-09-25 17:08:34 2 29
为什么使用 2 行与 4 行的网格模板区域时行高不同?

使用我不理解的网格模板区域,我得到了一个令人惊讶的行为。 您可以在以下 CodePen 中看到使用 4 行的布局: https://codepen.io/ericcarl/pen/dyeZzjP HTML: CSS: 一切都按预期工作,特别是“标题”网格单元格的高度由其内容确定的方式。 但 ...

2022-09-25 17:05:33 2 21
CSS 网格创建额外间隙

我一直在创建一个简单的响应式 CSS 网格,但由于某种原因,当我将浏览器缩小时,它会在第一列和第二列之间创建一些额外的空间。 这是我的代码。 .services-container { display: grid; grid-template-columns: repeat(auto-fit, m ...

2022-09-25 12:48:26 2 32
CSS 网格与负边距使元素高度随之增长

我正在尝试将以下内容模拟到 CSS 网格中: 本质上是 7 张卡片布局,边距为负。 为了实现这一点,我创建了一个3x3网格并使用grid-area来让卡片 1 和 4 跨越 2 列。 然后,我在卡片 2 和 3 上应用了负边距以实现图像中的内容。 但是,正如您将在我的演示中看到的那样,它会导致卡片 ...

2022-09-24 17:12:41 1 19
如何让电网差距负责?

我有一个笔记应用程序,这是我的笔记网格样式: 网格模板列repeat(auto-fit,minmax(250px, 1fr)); 以前,但我想让间隙响应,而不是笔记的大小。 我为gap设置了一个初始值,它是10px。 当网格开始换行时,我想负责任地改变间隙以填充空白区域。 我想在“note3”右侧 ...

2022-09-24 11:47:04 1 23
使用 CSS 网格作为日历

After researching on the alternatives available to draw an HTML calendar in a page, I ended up that the easiest way to do it, with by far the less CS ...

2022-09-24 04:03:33 1 18
带有 CSS 网格的两列响应式博客布局

我需要以下响应式设计,我想用纯 CSS 来实现: 我尝试了以下 CSS 网格方法,但最终将Heading框拉伸到Table of contents的高度。 有没有办法让这些行高彼此独立? h1 { grid-area: heading; } div.toc { grid-area: toc; } ...

2022-09-23 08:46:16 1 18
如何保持网格项目响应方形和固定高度的网格容器?

我正在尝试构建一个算法可视化工具。 我希望网格容器填充 rest 视图高度并保持网格项目正方形。 我设置了 body: height: 100vh ,但是当我设置容器height: 100%并设置网格项aspect-ratio: 1时,网格容器会展开。 如何保持 rest 视图高度的固定高度并根据 ...

2022-09-23 07:50:55 0 27
CSS 网格大小:如果另一列很小,则允许任一列占据整个宽度,但如果不使用一定比例

我想布置一个 CSS 网格(或表格)以下属性: 在最常见的情况下,列一起包含的内容会填满整个宽度,给它们宽度 1:2 (1fr 2fr) 但是,如果第一列的内容很小,则允许第二列展开同样,如果第二列的内容很小,让第一列扩大如果两列都很小,则网格可能会缩小。 两列都应具有最小宽度,但使用网格布局工具似 ...

2022-09-22 15:04:54 0 21
如何在 flex 容器下放置网格包装器?

我正在尝试制作所有布局的“示例页面”(因此一个在另一个之下)如何将网格包装器放置在 flex 容器下而不显示在同一行中? 如果我删除display: flex它会自动进入但 flex 保持在同一行。 为什么它们都具有相同的鲑鱼背景颜色? 谢谢。 .flex-wrapper { display: ...

2022-09-22 13:51:21 2 28
CSS 网格列宽:在 Firefox 中不起作用

我的外部网格有两列; 右上角的单元格包含另一个网格,它是 3 个方形单元格。 在 Firefox 中,内部网格(黄色)水平跨越整个容器,因此比其子元素占用更多空间。 在 Chrome 中,它按预期工作。 我尝试使用grid-auto-columns: min-content等,但没有区别。 ht ...

2022-09-21 12:09:15 0 29
在 HTML 布局中将背景颜色设置为网格行的最佳方法是什么

我有一个两行三列的网格,如下图所示。 我正在为网格使用以下 CSS 属性: 我可以执行以下操作将第一行的背景颜色设置为白色: 但这是一个好方法吗? 有没有办法直接在.grid-container class 中为网格模板行着色? 片段 body{margin:0}.grid-container{ ...

2022-09-21 11:45:51 1 33
使用带有模板列和行的网格属性显示列

我正在尝试显示带有列和行的网格。 我想按照这里描述的方法我使用这种方法的原因是它需要最少的 css(只有一行)。 我已经完成了几乎 98% 的工作,但剩下的一件事是我无法获得 1) 列正确对齐 2) 移动设备的垂直滚动条。 我是新手,所以无法用文字描述确切的问题。 所以,我发布图片 我已经尝试了很多 ...

2022-09-20 13:07:00 1 22

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM