CSS网格项目不在预期位置
是指在使用CSS网格布局时，网格项目的位置与预期不符的情况。这可能是由于布局规则、网格容器属性或网格项目属性的错误使用导致的。
要解决这个问题，可以采取以下步骤：
- 检查网格容器属性：确保正确设置了网格容器的display属性为grid或inline-grid。这是使用CSS网格布局的基本前提。
- 检查网格布局规则：确认网格布局规则是否正确。网格布局规则由网格容器的grid-template-columns和grid-template-rows属性定义。确保这些属性的值正确设置，并且网格项目的数量与规则中定义的网格行列数相匹配。
- 检查网格项目属性：检查网格项目的属性是否正确设置。网格项目可以使用grid-column和grid-row属性来指定其在网格中的位置。确保这些属性的值正确设置，以使网格项目出现在预期位置。
- 检查网格项目的位置关系：如果网格项目的位置关系不正确，可以使用grid-column-start、grid-column-end、grid-row-start和grid-row-end属性来调整它们的位置。通过调整这些属性的值，可以将网格项目放置在预期位置。
- 检查其他CSS属性：有时，其他CSS属性（如margin、padding、position等）可能会影响网格项目的位置。确保这些属性的值没有干扰网格布局。
如果以上步骤都没有解决问题，可能需要进一步检查代码中的其他错误或与网格布局相关的CSS属性。此外，可以使用浏览器的开发者工具来调试和查看网格布局的实际效果，以帮助定位问题所在。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种应用场景。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：提供高性能、可扩展的MySQL数据库服务，适用于各种规模的应用。详情请参考：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，适用于存储和管理各种类型的数据。详情请参考：https://cloud.tencent.com/product/cos
相关·内容
1回答
在使用grid - template -rows:/grid-template-column声明模板之后，我尝试使用grid-column/grid-row赋值来对齐嵌套网格中的项。$50和Give项目应该显示在第3行，其中一项显示在第1列，另一项显示在第2列。相反，它们显示在第2列的第1行和第2行。我不明白它们为什么要以这种方式显示。在这个问题上的任何帮助都将不胜感激。DOCTYPE html> <link rel='stylesheet'
浏览 9提问于2019-01-27得票数 2
回答已采纳
2回答
我有一个混合了P，UL IMG等内容的页面，我试图通过CSS调整图像大小并从左上角位置对齐图像，但当我这样做时，有时内容是重叠的图像，有时UL的项目符号不在网格中。请为此推荐CSS.scrollable_content { float: left; border
浏览 2提问于2017-05-15得票数 0
我在试着让网格响应式。到目前为止，它是有效的，但在事情上仍然困扰着我。如果我将网格项的span属性设置为从左数第二列开始，则网格会在调整窗口大小时断开。预期结果和实际结果： 📷 因此，有两个网格容器具有几乎相同的CSS属性。顶部网格的项目应该在网格容器的最右边，底部网格的项目应该在网格容器的最左边。底部网格及其项目按预期
浏览 21提问于2020-07-22得票数 1
我在将布局转移到Rails项目时遇到了问题，在其他目录中一切正常，站点工作得很好，但当我在Rails中这样做时，当我添加"span-n“或"column”或其他一些东西时，它会损坏；/首先它在网格中浮动到右边休息并不在它的位置上<%= stylesheet_link_tag "blueprint/screen", :media => 'screen' %>
<%= stylesheet_link_
浏览 0提问于2011-06-06得票数 0
1回答
我对网格有一个问题，第四个元素显示在假设的第6个元素的位置。这是从我的代码中摘录的片段，但我无法使它看起来像在我的网站上。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity
浏览 7提问于2021-12-06得票数 0
2回答
最近，我将ExtJs集成到现有的网页中，导致了CSS冲突。我已经在我现有的样式表中识别了冲突的CSS。不幸的是，我不能修改我目前的样式表，因为整个网站都建在上面。我试过使用ctCls，baseCls，bodyCfg，bwrapCssClass和bodyCssClass，但是没有像预期的那样工作。;font-family: Arial, sans-serif;position: absolute;风格位置我曾经尝试过CSS<
浏览 2提问于2011-05-05得票数 0
我有一个浮动的工具提示div (以编程方式附加到body节点)，它应该出现在文档上，比如说100,150处，为了实现这一点，我通过jQuery设置了以下css：var targetLeft = 100; //Calculated
tooltip.css因此，尽管CSS理论上将位置设置为100,
浏览 0提问于2012-03-27得票数 0
1回答
当您有这样的内容时，只需要一个2fr节和一个1fr部分，您还需要指定列的起始位置和跨度(比如grid-column: 1/2; )，还是它只是简单的隐式？
浏览 2提问于2017-09-22得票数 1
回答已采纳
2回答
垂直居中而忽略其他元素
、、、
我使用“网格位置-项目-中心”，所以它得到居中和“h-屏幕”，以便让它在完全高度居中。问题是它不在中间，显然是因为顶部的标志。我如何忽略这个标志，并以它为中心呢？
你好，PixelPage
浏览 3提问于2022-06-30得票数 -1
回答已采纳
我想在一个3列网格中显示一个未知数量的项目。CSS网格似乎是完美的解决方案，使用它的最简单的形式给了我99%的我想要的东西。
相反，我希望它填充第一行，并将网格中的最后一个位置空着，如下所示：我使用的CSS是： display: grid;
grid-template-column
浏览 5提问于2022-05-11得票数 0
回答已采纳
我有一个具体的问题，关于我的网站，我用超文本标记语言，CSS，，和一些PHP。单击图像后，您将进入项目页面，顶部有一个项目导航(上一个项目/下一个项目)。每当我上传新项目时，我都会手动更
浏览 3提问于2011-08-21得票数 0
回答已采纳
在我的网格中，我有一个单一搜索的图标搜索，但搜索对话框确认总是弹出在左上角。我想让搜索对话框确认在jqgrid的中心，而不是在左上角。这是我的代码..
浏览 0提问于2013-05-02得票数 0
我最近复制了我的Xcode项目，用大约80%的相同代码制作了一个项目，但左边的文件是红色文本。这意味着什么?我该如何修复它？
浏览 0提问于2013-02-08得票数 0
回答已采纳
1回答
为相同的：创建plunk
当我打开单元格进行编辑时，要立即显示的选项--从现在开始，我必须在编辑单元格内单击。一旦我选择了适当的值，它也应该在网格中更新。
浏览 3提问于2019-03-27得票数 0
回答已采纳
我在网格中垂直跨越整个屏幕的StackPanel，面板的VerticalAlignment选项设置为底部。当我在代码中向面板中添加项目时，它们的位置从底部开始，当我添加更多内容时，它们的位置会向上移动。这是我们想要的。但是，不需要的是，在屏幕垂直填充项目之后，添加更多的项目将它们从屏幕顶部推开。我的愿望是让更多的物品从底部掉下来；我不在乎它们是否是不可见的；我只是不想让最上面的东西消失。
有什么窍门可以帮我渡过难关吗？提前谢谢你。
浏览 1提问于2021-04-19得票数 0
回答已采纳
1回答
我正在使用SlickGrid进行一些项目。我发现在实现很少的功能方面存在一些困难。下面是我想要实现的特性，但不知道如何使用灵活的网格来实现它。ScrollPosition重置问题:我有一个网格，比如70x100。我的视图端口一次可以容纳最多7行和10列。
现在，用户在网格中滚动，跳转到一些特定的单元格，比如第15行和第17列。我试图将setScrollIntoView用于(15,17)，但问题是当光滑的网格呈现时，它会重置所有单元格的位置，而现在单元格(15，17)不在
浏览 6提问于2014-09-05得票数 0
我有一些CSS类定义如下： .class-2 { -ms-grid-row: 1;他们的行为和预期一样。但是，如果我交换属性的顺序，即将其更改为 .class-2 { grid-row: 1/2;然后IE看不到-ms-网格行属性(根据developer检查器，它不在那里)。Chrome在这两种情况下都可以看到网格行。
浏览 1提问于2020-01-21得票数 0
回答已采纳
对于kendo网格，当我单击列标题进行排序时，它会清除对以前所选记录的选择。是否有一个选项，我可以选择排序，而不清除选择。
浏览 1提问于2013-01-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
