grid 相关问题

此标记含糊不清,请不要使用它。对于行列布局,请使用[grid-layout]。对于CSS Grid布局,请使用[css-grid]。对于HPC设置,请使用[网格计算]。对于R绘图包,请使用[r-grid]。对于多维数据,请使用[matrix]或[array]或[raster]。对于WPF网格控件,请使用[wpfgrid]

Tailwind Grid CSS 未显示指定值

基本上我使用 tailwindCSS 制作了一个网格布局,一开始它可以工作,但是网格不知何故搞砸了,现在它显示 2 行网格而不是 1 行。这是代码: 基本上我使用 tailwindCSS 制作了一个网格布局,一开始它可以工作,但是网格不知何故搞砸了,现在它显示 2 行网格而不是 1 行。这是代码: <div className="grid lg:grid-cols-2 grid-cols-1 grid-rows-1 gap-2 h-full w-full lg:py-10 py-5"> <div className="flex flex-col lg:justify-end md:justify-center justify-start h-full"> //codes </div> <div className="grid-rows-4 grid-cols-1 hidden lg:grid"> //codes </div> </div> 我将网格行指定为一,这是问题的视觉效果: 先谢谢大家了 发现问题了,很抱歉让您失望了。问题是我在其中一个 CSS 上放置了一些 .grid 代码,实际上我将一个文件从旧目录移动到了新目录,它更改了 tailwind .grid 实用程序类。检查一下你的 CSS 家伙

回答 1 投票 0

Slick Grid 显示 2 个网格,失去第二个网格的焦点

我一直在使用光滑的网格,这非常好,但有一个非常小的问题,我似乎无法停止。 我显示两个网格,一个是可编辑的,并且当项目“已批准”时,它们...

回答 1 投票 0

如何让网格中的元素有自己特定的高度?

这是以下容器。 您已经注意到网格中的最后一个元素(类似表格的结构)看起来很奇怪。是的,它看起来很奇怪,因为它采用了当前元素的最大高度......

回答 1 投票 0

网格中的 div 未正确排列

该项目是使用网格重新创作蒙德里安的绘画。我的意志不正确,有人可以告诉我我做错了什么吗?如果可能的话你能解释一下为什么它们是 4 列和 4 行吗...

回答 1 投票 0

w2ui 网格:禁用单行选择

我有一个启用了多重选择的 w2ui 网格。 我的目标是禁用某些行的选择并保留其他行的可用选择。 让网格=新的w2grid({ 名称:'网格', 框:'#grid', ...

回答 1 投票 0

Telerik Kendo 图布局网格

我正在我的 angularjs 项目中制作我的剑道图。我想在后台设置一个布局网格作为对齐形状的指南。我做了一些研究,但找不到任何解决方案。 是

回答 1 投票 0

如何在 tkinter 中移动东西

我一整天都在尝试学习 tkinter 但无济于事。我发现的所有信息似乎都过时了,我见过一千种移动物体的方法,但它们都坚持一侧。我有...

回答 1 投票 0

如何让div根据css中的网格行和网格列调整大小?

我想为图片库创建一个网格,但是当我使用 grid-row 和 grid-column 属性来设置定义网格容器中元素的区域时,需要花费两秒的时间.. .

回答 0 投票 0

我刚刚开始使用有关我的网格系统的 Bootstrap 帮助

我已经尝试了几个小时,我找不到解决方案,我应该如何制作我拥有的这个网格系统? 在此输入图像描述 在我尝试过的系统中,当我将侧面的 col 高度设置为长时...

回答 0 投票 0

CSS 网格:如何强制一个子尺寸在 1fr 和 2fr 之间?

要求:强制 Grid 容器中的第二个子元素适应 1fr 和 2fr 的大小。 AFAIK,minmax() 不适用于这种情况,因为第一个值不能是 fr 单位。

回答 0 投票 0

如何让底部成为元素的开头?

我有一个容器,其中包含要使用不同排序算法进行排序的元素。 在其中一个容器中,我选择使这种排序可见的方式最终导致两个元素成为

回答 1 投票 0

如何使用 Bootstrap 5 将砌体布局仅应用于平板电脑视口

请告诉我如何将砌体布局仅应用于平板电脑视口(col-md-6),笔记本电脑视口(col-lg-4)正常使用引导网格。我完成了笔记本电脑视口,但平板电脑视口重新...

回答 0 投票 0

像砖石一样的曼廷网格

嗨女士们先生们:) 我正在构建一个反应应用程序。在那里,我想用 mantine 建造一个像砖石一样的网格。显示的组件的宽度和高度必须自动填充网格,

回答 1 投票 0

CSS实现按下按钮效果的正确方法

我正在使用 CSS 创建钢琴布局。 我真的很喜欢这种“按下按钮”的效果,但它会改变周围的元素。如何避免呢? 我正在使用 CSS 创建钢琴布局。 我真的很喜欢这种“按下按钮”的效果,但它会改变周围的元素。如何避免呢? <main> <div id="o-2" class="octave"> <button id="C2" class="C key"></button> <button id="C2-sharp" class="C-sharp key-black"></button> <button id="D2" class="D key"></button> <button id="D2-sharp" class="D-sharp key-black"></button> <button id="E2" class="E key"></button> </div> </main> main { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .octave { display: grid; grid-template-rows: 25% 25% 25% 25%; grid-template-columns: repeat(14, auto); } button { border: 1px solid black; margin: 1px; box-shadow: 5px 5px 5px black; cursor: pointer; } button:active { margin-left: 4px; margin-top: 4px; box-shadow: 1px 1px 5px black; } 按键的定位是使用网格实现的。 谢谢! 您可以使用 transform 属性,而不是在 :margin 伪类中调整 active。 transform 属性允许您稍微缩放按钮并在按下按钮时将其向下移动,而不影响周围元素的布局。 ... button { border: 1px solid black; margin: 1px; box-shadow: 5px 5px 5px black; cursor: pointer; transition: transform 0.2s ease; /* Add a smooth transition */ } button:active { transform: scale(0.95) translateY(3px); /* Scale down and move down */ box-shadow: 1px 1px 5px black; } 您可以更改按钮元素类型。下面我分享一下。 main { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .octave { display: grid; grid-template-rows: 25% 25% 25% 25%; grid-template-columns: repeat(14, auto); } a { border: 1px solid black; margin: 1px; box-shadow: 5px 5px 5px black; cursor: pointer; width:14px; height:30px; } a:active { margin-left: 4px; margin-top: 4px; box-shadow: 1px 1px 5px black; } <main> <div id="o-2" class="octave"> <a id="C2" class="C key"></a> <a id="C2-sharp" class="C-sharp key-black"></a> <a id="D2" class="D key"></a> <a id="D2-sharp" class="D-sharp key-black"></a> <a id="E2" class="E key"></a> </div> </main> 你可以试试这个代码: button:active{ transform: translate(4px, 4px); box-shadow: 1px 1px 5px black; } “按下按钮”效果会移动其周围的元素的原因是因为您在按钮处于活动状态时为其添加边距。避免这种情况的一种方法是使用transform:translate()而不是边距来在按下按钮时移动按钮。这样,按钮仍然会占用与之前相同的空间,并且其他元素不会受到影响。 以下是如何修改 CSS 以使用变换而不是边距的示例: button:active { transform: translate(4px, 4px); box-shadow: 1px 1px 5px black; } 在此代码中,我们使用 Transform 属性在按下按钮时将按钮向右移动 4 个像素,向下移动 4 个像素。 box-shadow 属性也被修改,使按钮看起来更像是被按下的。

回答 4 投票 0

我快要哭了,请大家帮帮我

我尝试创建一个网格,行和单元格基于我的列表,效果很好,但问题是网格很灵活,它包装了其中的数据。 导入'包:flutter/mat...

回答 0 投票 0

如何创建一个由三个叠加单元格组成的网格,其大小只有两行? (HTML,CSS)[关闭]

首先,抱歉这个问题,这看起来很愚蠢,但我不知道该问谁。 我想根据《Valorant》游戏中的武器选择来制作这个网格。 (图像)在html,css(js?)中,基于表格...

回答 0 投票 0

这个怎么做? (HTML、CSS)

首先,抱歉这个问题,这看起来很愚蠢,但我不知道该问谁。 我想基于 或 (或任何最好的)在 html、css (js?) 中制作此图像。 我已经开始了...

回答 0 投票 0

我无法正确使用网格属性来创建特定布局

我正在尝试创建图像中显示的布局,但我无法以任何可能的方式做到这一点,我尝试使用显示:网格,网格模板区域和几乎所有网格属性,但我可以...

回答 0 投票 0

旋转水平图像以适应网格中的垂直空间

我有一个网格,其中包含来自(wordpress)画廊的项目。在制作响应式布局时,如果我有垂直空间(行跨度)来覆盖它,我希望能够调整网格并旋转图像......

回答 0 投票 0

将 Flex 容器在特定断点处包裹为全宽

我有 3 个 Div 容器。框 1 应位于左侧,框 2 和框 3 位于右侧,如上图所示。 桌面上的 Flexbox 如何将 Box 3 换成全宽的新行...

回答 0 投票 0

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