grid 相关问题

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

ASP.NET:有关 gridviews 中的列行换行功能的问题

我有一个带有几列的 ASP.NET gridview(嵌入在 DIV 中)。对于某些列,定义了换行,而对于某些列则没有定义换行(使用 ItemStyle.Wrap = true/false)。对于所有列 ItemStyle.Width 是 s...

回答 2 投票 0

如何找到网格中矩形的位置?

我正在尝试在 WPF C# 中创建一个 Bricks,但我无法在网格中找到矩形的位置。 我需要矩形的坐标来实现碰撞并在打破时添加点...

回答 1 投票 0

react mui/x-data-grid onSelectionChange - 未跟踪/调用

我试图允许从表中选择 ID 列表 这是我的公用表代码 从 '@mui/x-data-grid' 导入 { DataGrid, GridColDef }; 从 '

回答 1 投票 0

在森林绘图仪中分离多个波段,以将置信区间与相邻文本对齐

与森林绘图仪教程中的本节类似,我希望图中的每一行都有多个置信区间带 (3)。 如下图所示,问题是当我...

回答 1 投票 0


如何找到网格中矩形的位置? C# WPF

我正在尝试在 wpf c# 中创建一个 Bricks,但我无法在网格中找到矩形的位置。 我需要矩形的坐标来实现碰撞并在打破时添加点...

回答 1 投票 0

制表符网格在使用列 updateDefinition 时添加新列而不是更新 css 样式

来自 JavaScript 初学者的问题。我有一个用制表器网格创建的表格。我想在单击其中一个单元格时“选择”一列,并取消选择另一个单元格

回答 1 投票 0

动态添加和删除制表网格单元格中的 css 类

我想“选择”使用制表器网格创建的表中的一列。我想要实现的是将 css 类添加到选定的列: 我尝试通过添加 cellClick 函数来做到这一点...

回答 1 投票 0

如何让按钮标签中的文本符合Grid和GridRow?

当我迭代数据表并使用网格内的 GridRow 呈现内容时,一切都按照我的预期对齐。 虚拟堆栈{ 文本(表.名称) 网格 { ForEach(电流) {

回答 1 投票 0

CSS 网格:如何每行制作 3 个项目,但对于有 5 个项目的情况,接下来的 2 个应该放在中心

我有一个案例,现在清单上有 5 项。 在布局上,第一行应有 3 个项目,第二行应有 2 个项目,但位于中间; 我的 CSS 代码不适用于具有 5 个元素的情况...

回答 1 投票 0

为什么我输入 6 列,div 却占据 12 列?

我正在尝试使用 col-5 将 4 个 div 分成两列。但当屏幕尺寸较小时,所有 4 个 div 都会占据 12 列,而不是每个 5 列,从而形成一个完整的列。 我是新来的

回答 1 投票 0

在ag网格反应中排序时修复一行

有一个下拉菜单,根据下拉菜单的值,我在这里对 ag 网格进行排序,但我想在使用 id 956306 进行排序时修复顶部的一行,我怎样才能实现它? 常量

回答 1 投票 0

使具有自然尺寸的图像适合父容器最大高度约束(无对象拟合)

我有一个图像,其高度应受到限制,因此容器高度最大为 400px。图像应保持其自然的长宽比。 重要的是,我不能使用对象拟合,因为我

回答 1 投票 0

将网格与 SortableJS 结合使用

我正在使用 SortableJS for React 并尝试实现水平网格,因此最终结果如下所示: 我设法做到了这一点,但是排序功能根本不起作用。我...

回答 2 投票 0

通过网格位置调用Tkinter元素

我正在开发一个界面,需要我突出显示网格中与单独面板中的巴特输入相对应的标签,为此我希望使用由 0... 矩阵组成的“地图”

回答 1 投票 0

在编辑单元格时恢复 TDrawGrid 中的原始文本

我在 Delphi 10.2 中有一个 TDrawGrid,其中一些单元格显示文本。允许用户编辑这些单元格。当用户编辑单元格时,我想提供以编程方式输入预

回答 1 投票 0

CSS复杂的GRID布局,如何做到这一点?

如何帮助我实现这个布局? 我尝试了很多事情,但没有一个像我想要的那样工作。我不想使用模板区域。 这是我的 HTML: ... 如何帮助我实现这个布局? 我尝试了很多东西,但都没有达到我想要的效果。我不想使用模板区域。 这是我的 HTML: <div class="grid-container"> <p> The exhibition and documentary film "We are all people with developmental disabilities", which was presented in the Staff Gallery, was created in cooperation between Benetton Belgrade and the humanitarian organization Dečje srce... read more </p> <figure> <img src="img/about/csr-4.png" alt=""> </figure> <figure> <img src="img/about/csr-3.png" alt=""> </figure> <figure> <img src="img/about/csr-2.png" alt=""> </figure> <figure> <img src="img/about/csr-1.png" alt=""> </figure> </div> 看起来像三列三行。 .grid-container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 100px 50px 100px; gap: 1em; } .grid-container>*:nth-child(1) { grid-column: 1; grid-row: 1; margin: 0; overflow: hidden; } .grid-container>*:nth-child(2) { grid-column: 1; grid-row: 2 / span 2; } .grid-container>*:nth-child(3) { grid-column: 2; grid-row: 1 / span 3; } .grid-container>*:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; } .grid-container>*:nth-child(5) { grid-column: 3; grid-row: 3; } figure { margin: 0; } img { width: 100%; height: 100%; object-fit: cover; } <div class="grid-container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.</p> <figure> <img src="http://picsum.photos/200"> </figure> <figure> <img src="http://picsum.photos/200"> </figure> <figure> <img src="http://picsum.photos/200"> </figure> <figure> <img src="http://picsum.photos/200"> </figure> </div>

回答 1 投票 0

如何为空 CSS 网格的奇数列着色?

假设我有一个简单的 html CSS 脚本: 。网格 { 显示:网格; 网格模板列:重复(27,minmax(0,1fr)); 网格模板...</desc> <question vote="0"> <p>假设我有一个简单的 html CSS 脚本:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; .grid { display: grid; grid-template-columns: repeat(27, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); height: 50rem; width: 50rem; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&#34;grid&#34;&gt; &lt;!-- Your grid items will go here, but for this example, we&#39;re leaving them empty --&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>我希望网格中表示 1、3、5 等的奇数列的颜色为灰色。 请注意,我的网格中没有任何元素!</p> <p>感谢您花时间阅读本文:)</p> </question> <answer tick="false" vote="0"> <p>使用渐变着色:</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>.grid { display: grid; grid-template-columns: repeat(27, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); height: 50rem; width: 50rem; background: linear-gradient(90deg,#ccc 50%,#0000 0) 0/calc(200%/27); }</code></pre> <pre><code>&lt;div class=&#34;grid&#34;&gt; &lt;!-- Your grid items will go here, but for this example, we&#39;re leaving them empty --&gt; &lt;/div&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

回答 0 投票 0

如何在 .Net Maui 中创建第一个单元格为正方形的网格?

我想创建一个网格,其第一个单元格为正方形,即其高度等于其宽度,而宽度由屏幕宽度决定。 我在想像下面这样的东西,但它不起作用。 我想创建一个网格,其第一个单元格为正方形,即其高度等于其宽度,而宽度由屏幕宽度决定。 我在想像下面这样的东西,但它不起作用。 <Grid RowDefinitions ="{DeviceDisplay.Current.MainDisplayInfo.Width}, *"> ... ... </Grid> 是的,您可以通过代码实现这一点。 我创建了一个demo,你可以参考以下代码: public class GridPageCS : ContentPage { public GridPageCS() { Grid grid = new Grid { RowDefinitions = { new RowDefinition { Height = new GridLength(DeviceDisplay.Current.MainDisplayInfo.Width, GridUnitType.Star) }, new RowDefinition { Height = new GridLength(100) } }, ColumnDefinitions = { new ColumnDefinition() } }; grid.Children.Add(new BoxView { Color = Colors.Green }); grid.Children.Add(new Label { Text = "Row 0, Column 0", HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center }); Title = "Basic Grid demo"; Content = grid; } } 如果您想要一个完美的方形单元格,并且无论纵向/横向尺寸如何,都填充剩余部分,我们可以使用视图模型来提供帮助。 <!-- MainPage.xaml --> <Grid Width="{Binding GridWidth, Mode=OneWayToSource}" Height="{Binding GridHeight, Mode=OneWayToSource}"> <Grid.RowDefinitions> <RowDefinition Height="{Binding SquareCellSize}"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="{Binding SquareCellSize}"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Rectangle x:Name="squareCell" Fill="LightSteelBlue"/> <Rectangle x:Name="nextCell" Fill="Orange" Grid.Row="{Binding NextRow}" Grid.Column="{Binding NextColumn}"/> </Grid> 在上面,我们使用 OneWayToSource 绑定来检索父级 Width 的 Height 和 Grid。我们用它来计算方形单元的尺寸以及下一个单元的位置(即它可能位于方形单元的右侧,也可能位于底部)。 public partial class MainViewModel : ObservableObject { [ObservableProperty] [NotifyPropertyChangedFor(nameof(SquareCellSize))] [NotifyPropertyChangedFor(nameof(NextRow))] [NotifyPropertyChangedFor(nameof(NextColumn))] private double _gridWidth = 100; [ObservableProperty] [NotifyPropertyChangedFor(nameof(SquareCellSize))] [NotifyPropertyChangedFor(nameof(NextRow))] [NotifyPropertyChangedFor(nameof(NextColumn))] private double _gridHeight = 100; public double SquareCellSize => Math.Max(Math.Min(GridWidth, GridHeight), 1); public int NextRow => GridHeight >= GridWidth ? 1 : 0; public int NextColumn => GridHeight >= GridWidth ? 0 : 1; }

回答 2 投票 0

Vaadin:如何在网格标题中触发 TextField 按键事件?

Vaadin V24,Java。 我有一个网格,可以保存 PojoClass 的数据。在该网格的标题中,我有一个文本字段。当您在字段中输入内容并按 Enter 键时,值...

回答 1 投票 0

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