grid 相关问题

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

有没有办法在另一个方法中再次调用$onInit函数?

问题我使用两个不同的网格都调用相同的控制器和网格组件。我想根据条件在一个网格中显示/取消显示复选框。由于 gridOptions 是...

回答 1 投票 0

自动定位网格元素

<script src="https://cdn.tailwindcss.com/3.4.1"></script> <div class="grid grid-flow-dense grid-cols-6 grid-rows-6 gap-4"> <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span> <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span> <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span> <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span> <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span> <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span> <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span> <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span> <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span> </div> 网格属性 grid-auto-flow: dense; 无法按预期工作。我可以用什么来将元素 1 替换为 2 和 3? 考虑到这是一个 React 项目,矩形是从 instagram api 拍摄的照片,所以我认为 grid-area 不起作用(可扩展性不够)。 您应该在第二、第三个元素中使用 col-start-[index]。 <span class="aspect-square col-start-3 h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2">[2]</span> <span class="aspect-square col-start-4 h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2">[3]</span> col-start-{n} 是使元素从第 n 网格线开始的实用程序。

回答 1 投票 0

MAUI Grid 在初始加载时以及在 Windows 上调整大小时会溢出父 TabbedPage 的子 ContentPage

我已将此问题作为 Bug 在 github 中向 MAUI 团队提交,但正在寻找解决方法的任何想法? 我在下面的网格中有一个简单的布局。 我在 github 上向 MAUI 团队提交了这个问题作为错误,但正在寻找解决方法的任何想法? 我在下面的网格中有一个简单的布局。 <Grid RowDefinitions="Auto,*,Auto"> <SearchBar /> <ListView Grid.Row="1"> <ListView.ItemsSource> <x:Array Type="{x:Type x:String}"> <x:String>ListView Item</x:String> <!-- Whole lot 'O items --> <x:String>ListView Item</x:String> </x:Array> </ListView.ItemsSource> </ListView> <HorizontalStackLayout Grid.Row="2"> <Button Text="Display Content Page" Clicked="ContentPageButton_Clicked" /> <Button Text="Display Tabbed Page" Clicked="TabbedPageButton_Clicked" /> </HorizontalStackLayout> </Grid> 当它位于 TabbedPage 的子页面中时,底部的按钮不可见,因为网格溢出了窗口的高度。这种情况发生在初始显示时以及调整大小低于一定高度时。 实际布局: 预期布局: 我有一个重现,让您可以在没有 TabbedPage 作为父级的情况下查看完全相同的页面,并且布局按预期执行。 有什么想法可以解决这个问题吗?感谢您的任何建议!!! 里面App.xaml.cs改变: // MainPage = new TabbedPage(); MainPage = new NavigationPage(new TabbedPage()); NavigationPage 允许您使用 Navigation.PushAsync 进行导航,因此您应该使用它而不是 Application.Current.MainPage = new TabbedPage();。 您也可以使用 AppShell。 现在为什么它可以解决您的具体问题,没有任何线索。我最好的猜测是,MainPage 并不打算(并经过测试)获得除了 NavigationPage 或 Shell 之外的其他内容,这会在布局上产生一些恶作剧(两者都实现 IPageContainer,可能会在这个级别执行某些操作)。

回答 1 投票 0

有没有办法用css创建“其中之一”?

我有以下代码来对两种类型的相等数量的元素进行排序。然而,它们都聚集在一起。有没有办法将它们放入一个列中,一个来自这种类型,一个来自另一种类型? ....

回答 1 投票 0

Tailwind CSS 网格提供 3 行而不是 3 列,但仅适用于 grid-cols-6

我想在里面有1行3列。所以我在一个网格 div 中创建了 3 个 div,它有一个“grid-cols-3”类,但我得到了 3 个原始数据和 1 个列。 我想在里面有 1 行 3 列。所以我在一个网格 div 中创建了 3 个 div,它有一个“grid-cols-3”类,但我得到了 3 个原始数据和 1 个列。 <div class="grid grid-cols-3"> <div> Col 1 </div> <div> Col 2 </div> <div> Col 3 </div> </div> 然后我得到了 但是当我将“grid-col-3”更改为“grid-col-6”时,它起作用了! <div class="grid grid-cols-6"> <div> Col 1 </div> <div> Col 2 </div> <div> Col 3 </div> </div> 然后我得到了 我是自学成才,没有什么好的导师。我知道如何使用像“grid-template”这样的 CSS 来做到这一点,但我使用 Tailwind 来更快地使用 Laravel 和 Livewire 进行部署。 如果您在 Tailwind Play 中测试代码,您会发现它工作正常(如预期),因此可能有一些 CSS 覆盖此类:grid-cols-3。你应该检查一下。 但是我对 Laravel Livewire 也有类似的问题我检查了内置的 css 文件,我注意到定义了这个类:.md\:grid-cols-3所以在我的例子中这解决了: <div class="grid md:grid-cols-3"> <div> Col 1 </div> <div> Col 2 </div> <div> Col 3 </div> </div> 我正在使用 Laravel Breeze 并遇到了同样的问题。 grid-col-1、grid-col-2、grid-col-4 有效,但 grid-col-3 无效。 如果通过运行 npm run dev 重新生成 CSS,它就可以工作。 Tailwind 使用了一个名为 purgecss 的插件,所以我认为这就是原因。非常令人沮丧的错误定位 我在 next.js/tailwind 中遇到同样的问题 @paddys_1 答案给了我正确的提示。我通过添加解决了这个问题 <div className='grid grid-cols-3 hidden'><div>1</div><div>2</div><div>3</div></div> 正文标签中的某处。

回答 3 投票 0

我想在反应时模糊我的背景图像网格,但是当我在背景图像上使用过滤器时,一切都变得模糊,并且我使用makeStyles

我在reac上有一张“卡”,卡内有一些组件,我想在卡上的背景上放置一些图像,并且我想模糊背景上的这个图像,但是当我使用filtere.. .

回答 1 投票 0

Qtable索引越界

我正在尝试在 gms2 中制作一个简单的 Q-learning AI,但是当我尝试更新 qTable 时,我会遇到同样的问题: 索引越界 项目很简单,AI ...

回答 1 投票 0

我只想模糊网格的背景,但它完全专注于使用 MakeStyles 的 React

我有一个页面,里面有我的课程信息,我想添加一些模糊的背景,但是当我添加这个模糊时,我的所有网格都会变得模糊,我可以看到任何东西,我如何才能只在上面添加模糊我的

回答 2 投票 0

CSS 网格内奇怪的不需要的溢出

我正在尝试制作一个网格,其中图像输入字段是一个长宽比为 1:1 的大正方形。我需要字段高度与网格中的其他输入字段对齐。所以第二个网格...

回答 1 投票 0

在ReactJS中使用动画在网格上添加列

我正在尝试在 antd 中的行上添加一列后添加动画, 这是我的代码 从 'react' 导入 React, { useState }; 从'antd'导入{列,行}; 常量页面 = () => { 常量 [

回答 1 投票 0

有什么方法可以让容器的内容及其滚动条不碰到容器自己的背景图像的边缘?

我正在开发一个网站的一页,该页面的中心仅包含两个垂直对齐的容器。目前,post 元素的内容及其滚动条与边框重叠...

回答 1 投票 0

一个网格中的标签与另一个网格中的值重叠

目前我有一个如下所示的 XML: 目前我有一个如下所示的 XML: <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="redacted" xmlns:templates="redacted" x:Class="redacted"> <ContentPage.Resources> <DataTemplate x:Key="labelTemplate"> <ViewCell> <Grid> <Label Text="{Binding Text}" /> </Grid> </ViewCell> </DataTemplate> <DataTemplate x:Key="buttonTemplate"> <ViewCell> <Grid> <Button Text="{Binding Text}" Clicked="UniversalButtonInterface_Clicked" /> </Grid> </ViewCell> </DataTemplate> <templates:StepItemTemplateSelector x:Key="stepSelectorTemplate" LabelTemplate="{StaticResource labelTemplate}" ButtonTemplate="{StaticResource buttonTemplate}" /> </ContentPage.Resources> <Grid> <StackLayout> <ListView ItemsSource="{Binding Steps}" ItemTemplate="{StaticResource stepSelectorTemplate}"> </ListView> </StackLayout> <local:CameraButton/> </Grid> </ContentPage> 问题是,如果标签较长,它会与第二个网格中的按钮重叠,并且我无法让该网格扩展其高度。我尝试扩展行定义,但高度基本保持不变,并且它仍然与第二个网格重叠,就好像它根本不想移动一样。如果我尝试应用边距/填充,操作将在网格高度的限制内,并且文本/按钮将被截断。 问题示例: 如何确保网格行的高度与标签缩放而不重叠? 默认情况下,ListView 中所有 ViewCell 的高度相同,如果只想调整 Label ViewCell 的高度,可以先将 ListView 的 HasUnevenRows 属性设置为 True: <ListView HasUnevenRows="True" ItemsSource="{Binding Steps}" ItemTemplate="{StaticResource stepSelectorTemplate}"> </ListView> 然后为ViewCell和Label设置合适的高度: <DataTemplate x:Key="labelTemplate"> <ViewCell Height="xxx"> <Grid> <Label Text="{Binding Text}" HeightRequest="xxx"/> </Grid> </ViewCell> </DataTemplate> 这是因为ListView中的HasUnevenRows属性控制是否可以设置单个viewcell的大小,更具体的解释可以参考Size items

回答 1 投票 0

将元素居中至全宽,左侧有一个元素

我正在尝试左对齐一个元素(按钮)并将另一个元素(徽标)在整个宽度上居中。中心的标志总是向右移动一点。在桌面上,我必须向

回答 1 投票 0

如何用Python制作颜色网格?

我正在尝试创建代表颜色混合比例的值网格。我在图中提供了一个示例。我面临的挑战是对角线下方和上方的颜色应该是

回答 1 投票 0

yii2 在 gridview 中更改控制器操作

我有 ItemController 并在 actionView 中放置了 Itempicture 的 gridview,我希望当我单击图标视图时,更新和删除,然后转到 ItempictureController。 那么如何更改控制器活动...

回答 5 投票 0

引导CSS网格

我正在尝试设置一个简单的示例,使用引导CSS的网格功能,并有一个index.html文件,该文件的容器有两行,每行有两列。但不是col...

回答 1 投票 0

如何在 R 中使用网格组合 grobs 以创建闭合形状?

我目前正在编写 ggplot2 扩展,在此过程中我尝试使用网格创建一个填充形状,其中某些边由函数 grobs 定义。我不确定如何获取一棵树...

回答 1 投票 0

如何将Bootstrap卡片在网站上以均匀间距居中?

我正在使用 Bootstrap 开发 React 应用程序,我面临着让 Bootstrap 卡在我的网站上以均匀间距居中的挑战。一个ro中的三张卡片之间的空间...

回答 1 投票 0

我有一个用 *ngFor 创建的角度网格。我在行内放置了一个自动完成功能,但我在建模时遇到了麻烦

`我知道 [(ngModel)]="selected" 对于所有导致问题的行, 我需要一些解决方法来解决并在此处选择输入图像描述时保留每行中的单个项目。 目前...

回答 1 投票 0

用网格将图像居中

我一直在努力开发一个网站,其中包含标题和正文中的图像。然而,我在尝试将图像置于身体部分的中心时遇到了挑战。图片

回答 1 投票 0

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