grid 相关问题

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

网格区域不受尊重,一切都从顶部开始

我最初有一个标题和主要元素,但在重新考虑我想要内容布局的外观后决定更改为网格。将我的内容移入圣杯网格容器后...

回答 1 投票 0

使用 Bootstrap 5 排列多个“盒子”

我想到了一个容器(盒子“1”),它将在水平网格中包含两个相等的盒子(盒子“A”和盒子“B”)。 方框“A”和方框“B”都会

回答 1 投票 0

SwiftUI LazyVGrid 内容压缩

我正在尝试构建一个网格,由其下带有图像和文本的项目组成。 我希望所有图像都具有相同的大小,并且文本可以根据文本的需要扩展单元格的高度。但形象始终是

回答 1 投票 0

AG 网格枢轴聚合为列

我们在我们的应用程序中使用 AG 网格。 我们的 ui 组件如下 公共行数据 = [ { 订单:1,数量:100,型号:“A”}, { 订单:2,数量:200,型号:“A”}, {...

回答 1 投票 0

数据到图像的转换在网格中看起来很奇怪

我有一个基本的 SwiftData 模型,其中图像存储为数据。 在我看来,我有这两个变量: @State private var selectedImages = [PhotosPickerItem]() @State private var images = [数据]() 而在...

回答 1 投票 0

网格行变换器过渡/动画

我有三个元素,当元素可见时定位在中间网格行(网格行:2)(使用类.hide和.show,以及它们改变的js),并定位在中间(网格-r...

回答 1 投票 0

SwiftData 数据到图像的转换在网格中看起来很奇怪

我有一个基本的 SwiftData 模型,其中图像存储为数据。 在我看来,我有这两个变量: @State private var selectedImages = [PhotosPickerItem]() @State private var images = [数据]() 而在...

回答 1 投票 0

CSS灵活的不同行高的网格列布局 - 如何将文本垂直对齐到顶部?

我正在开发一个网页布局,我需要创建一个具有不同行高的灵活的列结构。目标是有一栏具有更高的行高,同时确保两个段落...

回答 1 投票 0

HTML、SCSS、JSX、React、灵活网格

我需要这种使用灵活网格方法的方法,其中 768px 和 1024px 媒体屏幕的用户应该能够查看此处的确切输出,并且在移动应用程序视口上应该是...

回答 1 投票 0

如何在swiftUI中制作特定的网格布局

如何在 swiftUI 中制作如下网格布局? 我尝试使用 LazyVStack 和 ZStack,但没有根据需要正确找到。

回答 1 投票 0

滚动条在窗口的 tkinter 应用程序中不起作用

我有一个 tkinker 窗口,其中有几个使用 place 的按钮和布局。我尝试为整个窗口创建一个滚动条。我为带有 grid 的窗口添加了一个滚动条。滚动条不滚动...

回答 1 投票 0

在代码中指定RowDefinition.Height

当您在 xaml 中创建 Grid 时,您可以这样定义 RowDefinitions 当您在 xaml 中创建 Grid 时,您可以这样定义 RowDefinitions <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> </Grid> 我需要在代码中做同样的事情。我知道我可以写 RowDefinition row = new RowDefinition(); row.Height = new GridLength(1.0, GridUnitType.Star); 但这对我没有多大帮助,因为我收到了一个字符串。我可能可以创建自己的“字符串到 GridLength”转换器,但这感觉不太对,因为它从 xaml 工作得如此顺利。当然,我已经尝试过以下方法,但它不起作用 row.Height = new GridLength("*"); 我在这里缺少什么? GridLength 结构体定义了 TypeConverter,从 Xaml 实例化时将使用该结构。您也可以在代码中使用它。这叫GridLengthConverter 如果你用 Reflector 看 GridLength.cs,它看起来像这样。注意TypeConverter [StructLayout(LayoutKind.Sequential), TypeConverter(typeof(GridLengthConverter))] public struct GridLength : IEquatable<GridLength> { //... } 你可以这样使用它 GridLengthConverter gridLengthConverter = new GridLengthConverter(); row.Height = (GridLength)gridLengthConverter.ConvertFrom("*"); 您缺少将 RowDefinition 包含到 RowDefinitions RowDefinition row = new RowDefinition(); row.Height = new GridLength(1.0, GridUnitType.Star); YourGrid.RowDefinitions.Add(row); 再见! 芸香科 无需创建转换器,已经有一个转换器,XAML 解析器也正在使用它: var converter = new GridLengthConverter(); row.Height = (GridLength)converter.ConvertFromString("*"); 顺便说一句,您会发现像这样的转换器适用于很多类型,因为许多类型是从 XAML 中的字符串解析的,例如BrushConverter & ImageSourceConverter 按照 Rutx 的回答,我会把它写得更短 grdLbx.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1.0, GridUnitType.Star) });

回答 4 投票 0

如何以连续行的网格格式打印列表?

我正在寻找一种方法来打印(绘制)一个或多个带有连续线的网格,并在每个方格内打印 NxN 列表中的值。我在这个线程中发现了类似的东西,但在这种情况下它们正在加载...

回答 1 投票 0

无法启动新会话。可能的原因是远程服务器地址无效或浏览器启动失败。

我正在尝试使用 Selenium Grid 运行一个简单的程序(没有 Selenium 网格的先验知识),并且出现如下错误: 线程“main”org.openqa.selenium.remote 中出现异常。

回答 1 投票 0

ExtJS - 网格单元工具提示

我正在尝试为单元格创建一个工具提示。下面的代码做到了这一点,但工具提示仅出现在 Click(在 mozilla 中)上,而在 IE 中,工具提示出现在 mouseOver 上,但显示最后单击的单元格的值。 我想要...

回答 1 投票 0

如何制作像预览图一样的scss网格?

我正在尝试创建一个SCSS网格,如下图所示。问题是计算第二列和第三列。你也许知道如何实现这一目标吗? 感谢您的任何提示和帮助!

回答 1 投票 0

更改 DevExpress Blazor DxGrid 中的 ShowFilterRow

我写信询问如何更改 DxGrid ShowFilterRow - 我想要一个按钮(最好是接近页面大小或页码选择器),它可以显示/隐藏带有过滤器的行。 我...

回答 1 投票 0

如何在纯CSS中用动态列垂直排列元素?

我正在尝试创建一个布局,其中元素使用纯 CSS 垂直排列。如果有 2 列和 10 个项目,则前 5 个元素应显示在第一列中,第 n...

回答 1 投票 0

我想从头开始创建烛台图,其中方形网格(不是矩形网格)

我在 youtube 视频和网站上看到过很多烛台图,出于某种原因,其中大多数都有矩形网格。 如果我想创建方形网格,我该如何为它创建代码以及...

回答 1 投票 0

如何在 HTML 中合并具有两个不同列大小的两行

我想将“文本”合并到“图片”下的另一列 问题参考 我想将“文本”合并到“图片”下的另一列 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>grid</title> <style> body{ margin: 0; } .container { width: 100vw; height: 100vh; font-family: 'Quicksand', sans-serif; font-weight: bold; display: grid; grid-template-columns: 0.5fr 1fr; grid-template-rows: 50px 1fr 1fr 100px; gap: 10px; padding: 10px; box-sizing: border-box; } .container div { border: 1px solid black; } .header { grid-column-start: 1; grid-column-end: 3; } .text { grid-row-start: 2; grid-row-end: 4; grid-column-start: 2; grid-column-end: 3; } </style> </head> <body> <div class="container"> <div class="header">Header</div> <div class="pic">Picture</div> <div class="text">Text </div> </div> </body> </html> 这应该是输出: ↑ 如果感到困惑,请使用上面的链接作为参考 +------------------------------------------------ ---------+ |标题 | | | +--------------------+---------------------------------------- --------+ |图片|文字| | | | | | | | | | | | | +--------------------+ | | | | | | | | | | | +------------------------------------------------ --------+ 您可以针对使用 Flex 显示的页面视图尝试此操作。 <!DOCTYPE html> <html> <head> </head> <body> <div> <div class="header">Here is your header</div> <div style="display: flex"> <div> <img src="https://img.freepik.com/free-vector/realistic-credit-card-design_23-2149126090.jpg" /> </div> <div> Here is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of contentHere is lot of content </div> </div> </div> </body> </html>

回答 1 投票 0

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