grid 相关问题

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

使用Flexbox复制leetcode的日历布局，但间隙不均匀且不一致

我正在尝试从leetcode的个人资料页面复制日历功能，如下所示。 [\[leetcode 的日历功能\](https://i.stack.imgur.com/OMUSJ.jpg)][1] 就这样完成了...

css flexbox grid

回答 1 投票 0

如何设置类似于父行的嵌套制表符表（嵌套在单元格中）的样式？

我在单元格内显示嵌套的制表符表。这是您需要复制的所有代码：我在单元格内显示嵌套制表符表。这是您需要复制的所有代码： <html> <head> <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"> </head> <body> <div id="example-table"></div> <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js"></script> <script> //define some sample data, with the sub-table data held in the subtable parameter var tableData = [ {id:1, parent:"Bob", children:[{child:"Craig", age:18}]}, {id:2, parent:"Ann", children:[{child:"Bella", age:14}, {child:"Shaun", age:11}]}, {id:3, parent:"Jim", children:[{child:"David", age:15}, {child:"Alice", age:17}]}, ]; let table = new Tabulator("#example-table", { height:200, data:tableData, layout:"fitDataFill", columns:[ {title:"Id", field:"id"}, {title:"Parent", field:"parent"}, {title:"Children", field:"children", formatter:function(cell, formatterParams, onRendered){ //create and style holder elements let holderEl = document.createElement("div"); let tableEl = document.createElement("div"); holderEl.appendChild(tableEl); let subTable = new Tabulator(tableEl, { layout:"fitDataStretch", headerVisible:false, data:cell.getValue(), columns:[ {title:"Child", field:"child"}, {title:"Age", field:"age"} ] }) cell.getRow().normalizeHeight(); return holderEl; }, }, ], }); </script> </body> </html> 输出：问题：如何设置嵌套表格行的样式，使其具有与父行相同的背景颜色？贝拉和肖恩应该与安具有相同的背景颜色。大卫和爱丽丝应该与吉姆具有相同的背景颜色。这是一个技巧，您可以使用父行的索引来确定颜色。 columns:[ {title:"Id", field:"id"}, {title:"Parent", field:"parent"}, {title:"Children", field:"children", formatter:function(cell, formatterParams, onRendered){ //create and style holder elements let holderEl = document.createElement("div"); let tableEl = document.createElement("div"); holderEl.appendChild(tableEl); // calculate parent row backgrount color let backgroundColor = 'white'; if (cell.getRow().getIndex() % 2 == 0) {backgroundColor = 'rgb(239, 239, 239)';} let subTable = new Tabulator(tableEl, { layout:"fitDataStretch", headerVisible:false, data:cell.getValue(), columns:[ {title:"Child", field:"child"}, {title:"Age", field:"age"} ], // set nested row background color rowFormatter: function(row){ const children = row.getElement().childNodes; children.forEach((child) => { child.style.backgroundColor = backgroundColor; }); }, }) cell.getRow().normalizeHeight(); return holderEl; }, }, ],

css nested background grid tabulator

回答 1 投票 0

如何获取不可旋转方形边框内的所有网格单元

我有一个网格和一个具有位置和大小的边界框，我想计算该边界框中的每个网格单元以进行碰撞检测。我不想遍历每个单元格...

grid collision bounding-box voxel

回答 1 投票 0

是否有与图标网格符号等效的 Unicode？

Unicode中是否有类似的符号？毕竟，我能够找到 ☰ 作为符号，只是想知道是否有类似于图标网格的东西。

html image grid symbols

回答 10 投票 0

pack() 在 grid() 编辑的框架内（和 v.v.？

我可能是世界上最后一个知道这一点的程序员，但以防万一...... 我发现了数十个与此接近的论坛主题，但没有一个完全匹配。我挣扎了几个小时

tkinter grid pack

回答 1 投票 0

尝试移动项目时，拖动项目会消失/不会移动

我正在尝试制作一个 3x3 网格，其中每个网格项都是 1 个图像的一部分。我希望能够将这些项目拖放到另一个 3x3 网格中。（按照我想要的任何顺序）。我遇到过

javascript html css drag-and-drop grid

回答 1 投票 0

MAUI 横向模式网格问题

我正在尝试让网格的高度和宽度保持 2:1 的纵横比。我强制使用横向模式并具有以下网格设置：我正在尝试让网格的高度和宽度保持 2:1 的纵横比。我强制使用横向模式并具有以下网格设置： <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:game="clr-namespace:MyApp_Mobile" x:Class="MyApp.MainPage" x:Name="contentMain" x:DataType="thisapp:MainPageViewModel" IconImageSource="app_icon.png" LayoutChanged="ContentPage_LayoutChanged" Appearing="contentMain_Appearing" Shell.NavBarIsVisible="False"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="80" /> <ColumnDefinition Width="80"/> <ColumnDefinition Width="80"/> <ColumnDefinition Width="80"/> <ColumnDefinition Width="80"/> <ColumnDefinition Width="80"/> <ColumnDefinition Width="50"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="80"/> <RowDefinition Height="80"/> <RowDefinition Height="80"/> </Grid.RowDefinitions> <Grid x:Name="gridLayoutBox" BackgroundColor="{Binding boxColour}" IsClippedToBounds="True" Grid.ColumnSpan="6"> </Grid> 遗憾的是，它没有按预期工作，并且似乎不是从第 0 列开始。它也不符合列和行尺寸：我希望蓝色矩形的宽度是其高度的两倍 - 并且从左上角开始。我尝试切换到 6 行 3 列，但我遇到了类似的问题：谁能告诉我我做错了什么，因为我在 Xamarin 中从未遇到过这个问题？谢谢，迈克我复制了您的代码，只需为网格添加 Grid.RowSpan="3" 即可。然后我就得到了你想要的效果，没有LayoutChanged和Appearing。完整的xaml： <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp7.MainPage" Shell.NavBarIsVisible="False"> <Grid BackgroundColor="Pink"> <Grid.ColumnDefinitions> <ColumnDefinition Width="80" /> <ColumnDefinition Width="80"/> <ColumnDefinition Width="80"/> <ColumnDefinition Width="80"/> <ColumnDefinition Width="80"/> <ColumnDefinition Width="80"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="80"/> <RowDefinition Height="80"/> <RowDefinition Height="80"/> </Grid.RowDefinitions> <Grid x:Name="gridLayoutBox" BackgroundColor="Blue" IsClippedToBounds="True" Grid.ColumnSpan="6" Grid.RowSpan="3" > </Grid> </Grid> </ContentPage> 结果图像：另外，如果想强制横向，可以将以下代码全部放在Page的OnHandlerChanged方法或者OnAppearing方法中。 #if ANDROID Microsoft.Maui.ApplicationModel.Platform.CurrentActivity.RequestedOrientation = Android.Content.PM.ScreenOrientation.Landscape; #endif 在人像模式下，蓝色网格会被剪掉，因为它的宽度大于屏幕的宽度。

grid maui landscape

回答 1 投票 0

当我到达断点480px时，我在body上设置的右侧填充消失了

我的代码中有一些文章显示了网格。我已经将body的padding设置为padding: 0 1em;以下元素和类的最小宽度为 450px；有人可以吗

css flexbox grid media-queries padding

回答 1 投票 0

如何在 JavaScript 中向网格中的方块添加功能？

我使用 HTML、CSS 和 JavaScript 制作了一个网格，主要基于 Stack Overflow 使用 JavaScript 创建 16x16 网格这个问题的答案中的代码。我的问题是我想做

javascript grid containers

回答 1 投票 0

CSS 网格模板

我想使用网格创建这个模板：我是网格新手，我不知道属性以及如何明智地使用它来创建此模板我正在研究 Flex 属性，但我不知道如何

html css templates grid

回答 1 投票 0

CSS 间隙与边距

CSS的gap属性和margin属性之间的主要区别是什么？对于以下 html 代码，什么时候应该使用间隙和边距？ CSS的gap属性和margin属性之间的主要区别是什么？对于以下 html 代码，什么时候应该使用间隙和边距？ <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> </div> gap css 属性和 margin 之间的主要区别在于 gap 在项目之间创建空间，而 margin 在每个项目周围创建空间。例如，下面的 gap 用于在网格项之间创建 20 像素的空间。在第二个示例中，边距用于在每个弹性项目周围创建 10 个像素的空间。 <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> </div> /* I. option: Using gap */ .container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } /* II. option: Using margin */ .container { display: flex; flex-wrap: wrap; margin: -10px; } .item { flex: 1 0 calc(50% - 20px); margin: 10px; } 虽然 margin 在某些情况下表现良好，但 gap 的一般优点是： gap 对于可重用组件来说更可取 gap让造型变得很多代码变得更干净、更容易维护开箱即用的响应式设计需要更少的计算：每个元素相对于彼此的位置来自父组件注意： gap 可用于弹性盒和网格布局

html css gridview flexbox grid

回答 1 投票 0

如何在CSS网格上制作这样的标记？

我遇到了一个问题，我像往常一样在flex上进行布局，并面临着这样一个事实：高度块之间的空虚问题无法解决。但我不明白该怎么做...

css flexbox grid

回答 1 投票 0

如何将二维数组转移到更大网格中的所需位置？

我有一个像这样的坐标列表： [（x1，y1），（x2，y2），（x3，y3），（x4，y4），……] 另一方面，我有不同类型的数据，它是二维数组（60*60）的列表。用蛋彩画细胞...

python arrays grid

回答 1 投票 0

QML Grid 使用 SplitView 上下拖动行，左右拖动列？

我想最终创建一个有 2 行和 9 列的网格，然后在其中一些单元格中，我想将它们拆分为在其中包含不同的项目等。在这里，我的网格只有......