grid 相关问题

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

在云中托管、部署和运行 Web 应用程序 [已关闭]

到目前为止，我已经阅读了一些有关云计算和在网格中托管应用程序的服务的博客文章。如果我希望以与 pos 一样低的成本在云中运行 Web 应用程序...

grid stack cloud hosting

回答 3 投票 0

在 R 中的两个 geom_tile 之间创建箭头

我想在两个相关矩阵之间创建箭头。这是创建矩阵的代码库（网格额外）库（ggplot2） X <- data.frame("x1" = rnorm(100, 0, 1), ...

r ggplot2 grid

回答 1 投票 0

将云图标居中到导航边框背景的右中

我正在构建一个垂直导航栏，并且想要添加一个以右边框为中心、直接在背景线上的云图标。 ... 我正在构建一个垂直导航栏，并且想要添加一个以右边框为中心、直接在背景线上的云图标。 <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <div class="cloud-icon"> <svg>...</svg> </div> </nav> 这是code-pen示例。我非常努力地完成这项工作，因此我们将不胜感激任何和所有反馈。我尝试过使用 flex-box、css-grid 和边距来做到这一点，老实说，只是让它定位并保持在右侧，我就陷入困境，更不用说移动响应了。我编辑了 svg 视图框以使其居中 :root { --beige: #d9d9d9; } .contents { height: 100vh; width: 115%; margin: 0; display: grid; grid-template-columns: 1fr auto; } body { margin: 0; } nav { background-color: var(--beige); width: 50%; display: flex; } nav ul { list-style-type: none; margin: 0; overflow: hidden; height: 100%; display: flex; flex-direction: column; justify-content: center; } nav li { padding: 3%; } nav a { text-decoration: none; font-size: 1rem; letter-spacing: 11px; } .cloud { grid-column: 2; align-self: center; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> </head> <body> <nav> <div class="contents"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> <span class="cloud"> <svg width="132" height="60" viewBox="127.037 138.437 123.778 64.061" xmlns="http://www.w3.org/2000/svg"> <path d="M 238.358 176.764 C 236.657 179.93 233.537 182.461 229.622 183.849 C 225.707 185.238 221.287 185.382 217.246 184.252 L 216.805 184.121 C 214.807 183.557 213.071 182.515 211.827 181.134 C 210.583 179.752 209.892 178.097 209.845 176.389 C 209.851 175.101 210.242 173.832 210.985 172.692 C 211.729 171.551 212.802 170.572 214.114 169.837 C 214.538 169.602 214.846 169.253 214.981 168.852 C 215.117 168.451 215.073 168.024 214.856 167.647 C 214.67 167.34 214.384 167.081 214.028 166.896 C 213.672 166.711 213.261 166.608 212.838 166.599 C 212.425 166.599 212.022 166.697 211.678 166.88 C 209.859 167.899 208.354 169.24 207.276 170.801 C 206.199 172.361 205.577 174.1 205.46 175.884 C 205.379 178.154 206.104 180.395 207.552 182.342 C 208.999 184.29 211.107 185.862 213.627 186.873 C 212.264 189.048 210.205 190.889 207.664 192.205 C 205.122 193.522 202.191 194.266 199.173 194.361 C 197.476 194.407 195.791 194.104 194.278 193.482 C 192.765 192.86 191.472 191.939 190.519 190.804 C 190.308 190.565 190.03 190.369 189.708 190.232 C 189.385 190.096 189.028 190.022 188.663 190.018 C 188.303 190.032 187.952 190.114 187.638 190.257 C 187.324 190.4 187.055 190.6 186.854 190.842 C 185.012 193.329 182.069 195.16 178.618 195.965 C 175.168 196.769 171.468 196.487 168.266 195.174 C 165.064 193.862 162.598 191.618 161.367 188.896 C 160.136 186.174 160.232 183.176 161.635 180.508 C 162.29 178.927 163.634 177.592 165.418 176.752 C 167.202 175.911 169.304 175.623 171.333 175.94 C 173.416 176.327 175.236 177.346 176.414 178.786 C 176.699 179.071 177.082 179.283 177.515 179.394 C 177.948 179.505 178.413 179.512 178.85 179.412 C 179.287 179.312 179.679 179.111 179.976 178.833 C 180.273 178.556 180.462 178.214 180.52 177.85 C 180.521 177.552 180.416 177.26 180.219 177.008 C 179.043 175.502 177.398 174.272 175.45 173.439 C 173.502 172.607 171.316 172.2 169.113 172.261 C 166.909 172.322 164.764 172.847 162.89 173.785 C 161.016 174.723 159.48 176.04 158.433 177.607 C 156.666 180.278 155.954 183.322 156.392 186.33 C 152.473 186.747 148.489 186.189 144.974 184.731 C 141.458 183.272 138.578 180.983 136.718 178.168 C 135.866 176.895 135.397 175.477 135.349 174.031 C 137.943 174.637 140.698 174.622 143.281 173.987 C 145.864 173.352 148.162 172.125 149.896 170.455 C 151.056 169.18 152.686 168.235 154.554 167.754 C 156.421 167.273 158.429 167.282 160.289 167.778 C 160.619 167.859 160.967 167.875 161.306 167.826 C 161.644 167.778 161.964 167.665 162.238 167.497 C 162.514 167.33 162.735 167.112 162.885 166.861 C 163.034 166.61 163.107 166.334 163.097 166.056 C 163.014 163.528 163.809 161.031 165.392 158.848 C 166.974 156.665 169.281 154.882 172.052 153.701 C 173.237 153.196 174.536 152.889 175.872 152.799 C 177.207 152.709 178.552 152.837 179.824 153.177 C 179.824 153.42 179.639 153.626 179.569 153.85 C 178.811 156.349 179.088 158.979 180.358 161.338 C 181.29 163.093 182.746 164.633 184.596 165.822 C 186.446 167.011 188.633 167.812 190.96 168.153 C 191.816 168.287 192.686 168.356 193.559 168.358 C 196.505 168.334 199.373 167.584 201.777 166.209 C 204.182 164.834 206.009 162.9 207.015 160.665 C 207.117 160.424 207.152 160.168 207.12 159.915 C 207.087 159.661 206.987 159.417 206.826 159.198 C 206.665 158.979 206.447 158.791 206.187 158.647 C 205.927 158.502 205.632 158.405 205.321 158.362 C 204.812 158.306 204.295 158.388 203.85 158.594 C 203.405 158.801 203.057 159.121 202.862 159.504 C 202.158 161.026 200.885 162.334 199.219 163.248 C 198.084 163.885 196.797 164.324 195.44 164.54 C 194.084 164.755 192.686 164.74 191.337 164.498 C 189.987 164.255 188.715 163.789 187.6 163.129 C 186.485 162.469 185.551 161.63 184.859 160.665 C 183.57 158.411 183.339 155.857 184.209 153.476 L 184.557 152.746 C 185.903 149.933 188.362 147.556 191.552 145.985 C 194.742 144.414 198.485 143.736 202.201 144.056 C 205.918 144.376 209.399 145.676 212.107 147.755 C 214.814 149.833 216.596 152.575 217.176 155.554 C 217.289 155.98 217.583 156.36 218.006 156.63 C 218.43 156.9 218.957 157.043 219.496 157.033 C 223.003 156.986 226.483 157.541 229.704 158.662 C 233.809 160.152 237.021 162.889 238.641 166.278 C 240.261 169.667 240.159 173.435 238.358 176.764 Z" fill="black" transform="matrix(1, 0, 0, 1, -3.552713678800501e-15, -3.552713678800501e-15)"/> </svg> </span> </body> </html>

css flexbox responsive-design grid

回答 1 投票 0

grid css 2 列和第二列 2 行

我是网格CSS新手，我想实现这样的目标我坚持第一列，无法修复第二列的正确顺序这就是我所做的 .image-wrapper { 显示...

css sass flexbox grid

回答 1 投票 0

CSS 网格中每行之后的边框

我正在尝试使用 CSS 网格在每行之后制作一个边框底部，并将内容对齐到中心。我无法理解它。我希望 .line 填充整个 .wrapper 容器的宽度....

html css grid css-grid

回答 4 投票 0

在组件中使用顺风图像不会居中

我正在尝试将我的文本与我创建的网格的图像对齐，但由于某种原因它无法对齐。技能.jsx ... 我正在尝试将我的文本与我创建的网格的图像对齐，但由于某种原因它无法对齐。技能.jsx <div className='grid grid-cols-3 gap-0 mt-10 m-auto '> {images.map((image) => ( <div key={image.id} className='h-full w-full'> <img src={image.img} alt={image.name} className='w-4/12 h-4/12 my-5 border-4 border-black justify-center items-center' /> <h2 className='text-center'>{image.name}</h2> </div> ))} </div> 我正在努力为我的技能列表打造一个漂亮美观的外观。老实说，如果有人有更好的建议来完成这个组件，我也会接受。有一段时间一直坚持想出一些好东西。您好，您可以使用它垂直对齐它 <div class='grid grid-cols-3 gap-0 mt-10 m-auto'> <div class='h-full w-full flex flex-col items-center justify-center'> <img src="https://cdn.icon-icons.com/icons2/601/PNG/256/html_5_icon-icons.com_55763.png" alt="HTML icon" class='w-4/12 h-4/12 my-5 border-4 border-black justify-center items-center' /> <h2 class='text-center'>HTML</h2> </div> <div class='h-full w-full flex flex-col items-center justify-center'> <img src="https://cdn.icon-icons.com/icons2/601/PNG/256/html_5_icon-icons.com_55763.png" alt="HTML icon" class='w-4/12 h-4/12 my-5 border-4 border-black justify-center items-center' /> <h2 class='text-center'>HTML</h2> </div>

reactjs image grid components tailwind-css

回答 1 投票 0

Typst：通过网格功能自动适应列宽

我有三个 3:2 格式的人物，其中两个是横向模式，一个是纵向模式。我想把它们安排在同一页上，左边两个横的图，竖的......

grid typst

回答 1 投票 0

Playwright 与 Selenium GRID 集成不起作用。套接字联动返回错误

Playwright 与 Selenium GRID 集成不起作用。套接字联动返回错误。尝试过 Playwright 和 Selenium 最新版本和旧版本。剧作家应该与Selen联系......

selenium-webdriver grid playwright-java

回答 1 投票 0

如何让每个 div 彼此相邻，且之间没有任何空间

我是网格新手，并试图了解它们是如何工作的。下面的代码是我直接从 MDN - Css 网格布局复制的。有人可以帮我删除每个 div 周围的空白，以便...

css grid

回答 1 投票 0

如何让FancyGrid中的onChange正常工作？

我正在使用 Fancy Grid，当此单元格中发生一些更改或更新时，我想在调试器中看到它，我已将调试器放入函数中，当我进行任何更改时，它不会在内部暂停...

javascript grid gsp

回答 1 投票 0

MAUI：Listview 中的 UI 对齐问题，网格有 3 列

我在 Listview 中遇到 UI 对齐问题，其中 Grid 有 3 列，如下图所示：我的列表视图代码：我在 Listview 中遇到 UI 对齐问题，网格有 3 列，如下图所示：我的列表查看代码： <ListView x:Name="MyCustomers" ItemsSource="{Binding AllItems,Mode=TwoWay}" RowHeight="{OnIdiom Phone=80, Tablet=110, Desktop=80}" IsPullToRefreshEnabled="True" HasUnevenRows="True" CachingStrategy="RecycleElement" RefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <ViewCell.View> <Grid HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand"> <Grid.ColumnDefinitions> <ColumnDefinition Width="2*" /> <ColumnDefinition Width="6*" /> <ColumnDefinition Width="2*" /> </Grid.ColumnDefinitions> <Grid Grid.Column="0" HorizontalOptions="Start"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="12.25*" /> </Grid.ColumnDefinitions> <Grid VerticalOptions="CenterAndExpand" HorizontalOptions="Start" Grid.Column="1"> <Image Source="ic_profilebg_xx.png" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" x:Name="imagebg" Aspect="AspectFit"> <Image.HeightRequest> <OnIdiom x:TypeArguments="x:Double"> <OnIdiom.Phone>60</OnIdiom.Phone> <OnIdiom.Tablet>90</OnIdiom.Tablet> <OnIdiom.Desktop>60</OnIdiom.Desktop> </OnIdiom> </Image.HeightRequest> <Image.WidthRequest> <OnIdiom x:TypeArguments="x:Double"> <OnIdiom.Phone>60</OnIdiom.Phone> <OnIdiom.Tablet>90</OnIdiom.Tablet> <OnIdiom.Desktop>60</OnIdiom.Desktop> </OnIdiom> </Image.WidthRequest> </Image> <Label Text="{Binding user.fullname,Converter={StaticResource profilenameConverter}}" Style="{StaticResource InitalLabelStyle}"/> </Grid> </Grid> <StackLayout Grid.Column="1" Margin="3,0,0,0" HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Orientation="Vertical"> <Label Text="{Binding user.fullname, Converter={StaticResource nameConverter}}" FontFamily="Bold" VerticalTextAlignment="Center" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" TextColor="#676767" IsVisible="{Binding user.fullname, Converter={StaticResource nullCheckConverter}}"> <Label.FontSize> <OnIdiom x:TypeArguments="x:Double"> <OnIdiom.Phone>15</OnIdiom.Phone> <OnIdiom.Tablet>20</OnIdiom.Tablet> <OnIdiom.Desktop>15</OnIdiom.Desktop> </OnIdiom> </Label.FontSize> </Label> <Label Text="{Binding user.email}" VerticalOptions="CenterAndExpand" TextColor="#676767" VerticalTextAlignment="Center" HorizontalOptions="Start" HorizontalTextAlignment="Start" IsVisible="{Binding user.email , Converter={StaticResource nullCheckConverter}}"> <Label.FontSize> <OnIdiom x:TypeArguments="x:Double"> <OnIdiom.Phone>12</OnIdiom.Phone> <OnIdiom.Tablet>18</OnIdiom.Tablet> <OnIdiom.Desktop>12</OnIdiom.Desktop> </OnIdiom> </Label.FontSize> </Label> <Label Text="{Binding phoneNumber, Converter={StaticResource phoneNumberFormatConverter}}" VerticalTextAlignment="Center" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" TextColor="#676767" IsVisible="{Binding isPhoneEmpty}"> <Label.FontSize> <OnIdiom x:TypeArguments="x:Double"> <OnIdiom.Phone>12</OnIdiom.Phone> <OnIdiom.Tablet>18</OnIdiom.Tablet> <OnIdiom.Desktop>12</OnIdiom.Desktop> </OnIdiom> </Label.FontSize> </Label>  </StackLayout> <StackLayout Grid.Column="2" Orientation="Vertical" VerticalOptions="CenterAndExpand" HorizontalOptions="EndAndExpand"> <StackLayout Margin="0,0,0,5" HorizontalOptions="FillAndExpand" BackgroundColor="#5abcd7"> <Label Text="{Binding pointsToVisualize}" FontFamily="Bold" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" TextColor="White"> <Label.FontSize> <OnIdiom x:TypeArguments="x:Double"> <OnIdiom.Phone>15</OnIdiom.Phone> <OnIdiom.Tablet>20</OnIdiom.Tablet> <OnIdiom.Desktop>15</OnIdiom.Desktop> </OnIdiom> </Label.FontSize> </Label>  <StackLayout.Padding> <OnIdiom x:TypeArguments="Thickness"> <OnIdiom.Phone>3</OnIdiom.Phone> <OnIdiom.Tablet>6</OnIdiom.Tablet> <OnIdiom.Desktop>3</OnIdiom.Desktop> </OnIdiom> </StackLayout.Padding> </StackLayout> <StackLayout Orientation="Horizontal"> <Image VerticalOptions="Center" Source="ic_action_time.png"> <Image.WidthRequest> <OnIdiom x:TypeArguments="x:Double"> <OnIdiom.Phone>13</OnIdiom.Phone> <OnIdiom.Tablet>20</OnIdiom.Tablet> <OnIdiom.Desktop>13</OnIdiom.Desktop> </OnIdiom> </Image.WidthRequest> <Image.HeightRequest> <OnIdiom x:TypeArguments="x:Double"> <OnIdiom.Phone>13</OnIdiom.Phone> <OnIdiom.Tablet>20</OnIdiom.Tablet> <OnIdiom.Desktop>13</OnIdiom.Desktop> </OnIdiom> </Image.HeightRequest> </Image> <Label Margin="2,0,0,0" Text="{Binding user.updatedTime, Converter={StaticResource cnvDateTimeConverter}}" TextColor="#5abcd7" HorizontalOptions="FillAndExpand" VerticalOptions="Center"> <Label.FontSize> <OnIdiom x:TypeArguments="x:Double"> <OnIdiom.Phone>10</OnIdiom.Phone> <OnIdiom.Tablet>15</OnIdiom.Tablet> <OnIdiom.Desktop>10</OnIdiom.Desktop> </OnIdiom> </Label.FontSize> </Label> <StackLayout.Margin> <OnIdiom x:TypeArguments="Thickness"> <OnIdiom.Phone>3</OnIdiom.Phone> <OnIdiom.Tablet>6</OnIdiom.Tablet> <OnIdiom.Desktop>3</OnIdiom.Desktop> </OnIdiom> </StackLayout.Margin>  </StackLayout> </StackLayout> <Grid.Margin> <OnIdiom x:TypeArguments="Thickness"> <OnIdiom.Phone>3</OnIdiom.Phone> <OnIdiom.Tablet>6</OnIdiom.Tablet> <OnIdiom.Desktop>3</OnIdiom.Desktop> </OnIdiom> </Grid.Margin> <Grid.Padding> <OnIdiom x:TypeArguments="Thickness"> <OnIdiom.Phone>3</OnIdiom.Phone> <OnIdiom.Tablet>6</OnIdiom.Tablet> <OnIdiom.Desktop>3</OnIdiom.Desktop> </OnIdiom> </Grid.Padding> </Grid> </ViewCell.View> </ViewCell> </DataTemplate> </ListView.ItemTemplate> <ListView.Footer> <Label/> </ListView.Footer> </ListView> 我尝试在演示项目中重现此问题，并且在演示中工作正常。演示项目已上传此处。使用相同的代码，UI在演示项目中没有问题，但在我的实际项目中出现问题，可能是什么原因？注意：如果我取消第二列的 StackLayout.WidthRequest 注释，UI 对齐问题就会得到解决。我已经复制了你的项目并重现了你的问题。使用相同的代码，UI在演示项目中没有问题，但在我的实际项目中出现问题，可能是什么原因？这是因为演示项目中列表视图的所有项目都是相同的。但是你的真实项目每个项目都有不同的数据（堆栈布局不同）。如果我取消第二列的 StackLayout.WidthRequest 注释，UI 对齐问题就会得到解决。这是因为您使每个项目的宽度相同。我发现 StackLayout 中的 HorizontalOptions="Start" 不适用于您的项目（目标 .net 7.0）。但我在 .net 8.0 中测试了相同的代码，并且 HorizontalOptions="Start" 运行良好。 UI 对齐问题消失了。因此您可以尝试将项目升级到目标网络 8.0 来解决此问题。并且您可以在存储库上报告此问题。

listview grid maui

回答 1 投票 0

单击“小狗”按钮时出现奇怪的网格结果

我有一个假狗收养网站，我只是一个初学者，所以没什么特别的。我已经将其设置为您可以单击 6 个按钮中的 1 个，它将显示每只狗的小图片......

javascript html css button grid

回答 1 投票 0

无论内容大小如何，如何将 3x3 网格锁定到视口？

我正在尝试为闭路电视摄像机流创建一个页面，该页面在 3x3 网格中显示 9 个流，使用完整的可用宽度和高度，无需滚动。流的分辨率不同，但我...

html css grid viewport

回答 1 投票 0

比较不同积分网格大小的数值结果 (MATLAB)

我正在尝试使用Matlab积分来比较复积分的数值结果。特别是，我想使用以下方法检查结果的准确性固定积分区间 [0,T]...

matlab grid numerical-integration

回答 1 投票 0

显示 Flex 属性是否像父元素一样适用于内部元素

当我了解到显示：flex;仅适用于容器（父项），但在下面的代码中，当我在子项（项）中使用弹性框属性时，例如对齐项、对齐内容，为什么子项（项）

html flexbox grid

回答 1 投票 0

TailwindCSS：网格列自动高度

我想知道为什么网格列的自动高度在 tailwindcss 中不起作用： <... 我想知道为什么网格列的自动高度在 tailwindcss 中不起作用： <script src="https://cdn.tailwindcss.com"></script> <div class="grid grid-cols-3 gap-4"> <div class="bg-blue-100" style="height: auto!important">test</div> <div class="bg-blue-100 h-auto">test</div> <div class="bg-blue-100">test<br />test</div> </div> 如果我设置h-xxx，但我想要自动高度，它会起作用。所有列的高度都应基于其内容而不是最高的列。 align-items 的默认值为normal，其作用类似于网格容器中的拉伸。您需要设置 align-items:base-line。（items-baseline顺风。）至于为什么height:auto不起作用，当设置align-items:stretch时，每个项目的行为如justify-self:stretch所定义。因此，根据 spec 当框的计算宽度/高度（根据轴的情况）为自动并且其边距（在相应的轴中）都不是自动时，将框的使用大小设置为使其外部大小尽可能接近所需的长度尽可能填充对齐容器，同时仍然遵守最小高度/最小宽度/最大高度/最大宽度施加的约束。 <script src="https://cdn.tailwindcss.com"></script> <div class="grid grid-cols-3 gap-4 items-baseline"> <div class="bg-blue-100">test</div> <div class="bg-blue-100">test</div> <div class="bg-blue-100">test<br />test</div> </div>

html css grid tailwind-css

回答 1 投票 0

Python“列表索引必须是整数，而不是元组”错误

我正在研究在 8 x 8 的 2d 网格房间周围移动机器人，其中一部分是初始化传感器，该传感器由机器人周围最近的 5 个图块组成。 self.sensors = [0 for x in xrange(5)] ...

python arrays list grid

回答 6 投票 0

在CSS网格中，如何仅在下一个元素为空时才创建元素跨度，而不使用javascript

我正在尝试使用我的 html 元素创建一个模板，如果没有一个约束，这不会很复杂： html 元素必须都是同级元素！事实上，我在续中创建它们...

css grid

回答 1 投票 0

wpf中如何设置grid-column的背景色？

我有一个 wpf mvvm 应用程序。并且有一个包含多列的 GRID 在wpf中设置网格列的背景色的最佳方法是什么？