display: grid；导致忽略css宽度属性的宽度问题
display: grid; 是 CSS 中的一个属性，用于创建网格布局。它允许开发者将页面分割为多个网格区域，然后在这些区域中放置和对齐元素。
使用 display: grid; 可以实现灵活的布局，具有以下优势：
- 响应式布局：可以根据不同的屏幕尺寸和设备类型自动适应布局。
- 灵活性：可以轻松实现各种布局，如网格、多列、多行等。
- 对齐和分布控制：可以精确控制元素的对齐方式和宽度分布。
- 重叠布局：可以通过使用 z-index 属性实现元素的重叠布局。
display: grid; 的应用场景包括但不限于：
- 网页布局：可以将网页分割为多个区域，更好地组织和展示内容。
- 图片库展示：可以创建一个网格布局，用于展示图片库或相册。
- 表单布局：可以将表单字段按照网格方式排列，使得表单更加整齐美观。
- 响应式布局：可以通过媒体查询和自适应单元格大小实现不同屏幕尺寸下的自适应布局。
腾讯云提供了一系列与云计算相关的产品，其中与网页布局和前端开发相关的产品是腾讯云 Web+ 和腾讯云静态网站托管。这些产品可以帮助开发者快速搭建和部署网站，并提供灵活的布局和设计选项。
腾讯云 Web+ 产品链接地址：https://cloud.tencent.com/product/webplus 腾讯云静态网站托管产品链接地址：https://cloud.tencent.com/product/sls
相关·内容
代码 我的<body>中嵌套了一个<nav>、<main>、<footer>，顺序是这样的。我的<main>或<footer>没有问题。; display: grid;}
max-width: 90%;
.title-container<nav>的宽度似乎被限制在
浏览 67提问于2021-10-08得票数 0
回答已采纳
1回答
我试图使用以下3个CSS属性使我的表项出现在一行中，并显示任何超过分配宽度的列表。但是，这些属性，特别是现在的属性，会导致忽略宽度。 overflow: hidden; SSCP：
如何使它能够通过ng表设置宽度？
浏览 1提问于2014-11-04得票数 1
我正在构建一个基于jQuery的滑块。有一个960px的"display window“div，里面还有一个保存所有内容的div。内容有一个动态的宽度，我希望能够检索这个大小，以便滑块脚本确切地知道在每一侧滚动多远。加载内容(只是输出HTML的普通PHP查询)后，由于某种原因，其中的div仍然保留另一个div的宽度，最终我得到了960px的内容(即使内容占用了更多空间)。important
浏览 1提问于2011-10-06得票数 2
是否可以限制CSS网格列的宽度？ margin: 0;} display: grid; <div class="list-view"></div>
<div class="details"><&#x
浏览 0提问于2018-05-14得票数 7
回答已采纳
1回答
我正在尝试根据页面的宽度指定特定的display标记。通常，它是flex的，但小于437px。我希望将该属性指定为grid。Css， display: flex; margin-right: 1%; &#
浏览 6提问于2021-05-30得票数 0
回答已采纳
我试图直接从图像尺寸调整div，如果需要，图像下的任何文本(在div内)都会断线。如果你注意到了，第一个盒子占用了很多不必要的空间。它正在扩展到500px的最大宽度，而实际上，我只希望它在图像周围扩展。代码如下：width: auto;min-width: 200px;.grid img {height:
浏览 3提问于2015-05-28得票数 0
我目前正在做一些布局工作，在应用CSS网格规则时，我遇到了图像宽度超过容器宽度的问题。img { height: auto;}
display: grid; grid-column-g
浏览 0提问于2017-07-19得票数 0
如果我没有正确地问这个问题，请原谅我，我是这个网站的新手。我正在研究Odin项目的蚀刻素描项目，你们中的一些人可能对此很熟悉。基本上，在这一点上，我要做的是使用jquery中的一个按钮调整一些div的大小，我想知道是否可以用一个函数来设置那些div的CSS属性(高度和宽度)，其中我使用jquery变量来设置新的大小。.pixel的CSS属性反映“
浏览 1提问于2017-04-23得票数 1
回答已采纳
我有一张有两个单元格和两排的桌子。在这些细胞中，有一个图像。我有一个CSS规则来删除所有的边距和填充在下面这些： margin:0; padding:0; /* adding !important won't change anything since no other css rules conflict with this one */然而，这在实践中是行不通的。除底部外，除底部外，所有边的边缘都被适当移除。说明这一<
浏览 5提问于2012-03-13得票数 3
回答已采纳
6回答
您可以设置内联元素(如<span>、<em>和<strong> )的宽度，但在定位它们之前不会注意到任何效果。
( c)为什么只有当我们“定位”内联元素时，它们的宽度才是明显的？
浏览 7提问于2009-09-14得票数 51
回答已采纳
1回答
在我的聚合物2.0项目中，我使用了存在一个具有大量数据- 20+列的网格，因此在div中有一个溢出-y滚动。由于数量众多，网格内的列宽度会减少。父div具有display: flex属性，因此可以自动生成列的宽度。我们可以为使用CSS的列设置最小宽度吗？或者我可以用CSS来控制它吗？无法在这里再现问题代码，因为tha数据来自外部服务器(Oracle )。下面是HT
浏览 2提问于2018-08-07得票数 1
我对web dev是个新手，目前正在学习HTML和CSS。
我想在我的网站内创建一个投资组合页面，并为这件事使用了3列CSS网格，我想适应页面宽度和居中。我设法显示我想要的图片，边距和所有的，但我被一个问题卡住了:我的图像太大，这导致CSS网格太大并显示在页面之外。图像都是1000x1000像素的。我希望我的CSS网格调整自己的大小，以适应页面宽度</em
浏览 3提问于2020-07-17得票数 0
1回答
我看了一个教程，介绍如何使用CSS flex制作一个很好的滚动效果。所以我想试一试，用CSS网格来尝试。但它不能正常工作。我已经解决了一些主要的问题，但我对修复不太满意。网格列仍然存在一个主要问题。左应该坚持，这样右边的列就会滚动。但是，一旦滚动函数触发，右列就会更改宽度。我在这里找不到解决办法。其余的都有效，但我相信有一个更优雅的方法来实现我想要的。我非常感谢你的帮助！谢谢！这里
浏览 2提问于2019-09-26得票数 0
回答已采纳
3回答
我正在运行时的窗口中生成WPF网格，例如： <Grid.ColumnDefinitions<RowDefinition></RowDefinition>
浏览 0提问于2019-01-23得票数 5
3回答
正如您所看到的，我的代码grid_2已经离开了。所以我在中间添加了center类来修复它，但是div块是左浮动的。我想把这个grid_2 div放在中间。有人能帮我解决这个问题吗？HTML代码：CSS
浏览 4提问于2014-03-24得票数 0
回答已采纳
1回答
<li id="forum"><a href="#" class="prvy"><span>Fórum</span></a></li>现在我想要自动设置每个第三级菜单(menu3)的宽度，根据其中最长的文本。因此，在本例中，此.menu3的宽度将是文本"SCOOTER Brezová/V
浏览 3提问于2011-06-26得票数 1
回答已采纳
1回答
假设我有大约250个slider-item类样式的div。我在css A中有一个响应网格，它将div包装为列/项作为窗口缩放。下面列出的最小项宽度为240px。问题是属性grid-template-columns: repeat(auto-fill..)增长/缩小行b/c，div超过当前窗口宽度。A position: relative;
display: <e
浏览 0提问于2020-10-18得票数 0
回答已采纳
我有一个带有粘性的左右两列的CSS网格，如下所示：.grid { grid-template-columns: repeat(10, 200px); border: 1px solid black;}
position: sticky;}
.stic
浏览 19提问于2018-07-26得票数 1
回答已采纳
5回答
我创建了两个div；一个具有display:inline-grid属性，另一个具有display:grid属性。我想对这两个div的子元素应用背景颜色，但是带有display:inline-grid属性的div不对其元素着色。HTML和CSS代码#inline {}
浏览 0提问于2018-08-11得票数 6
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
