grid 相关问题

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

如何在画布上绘制 HTML 元素？

我想创建一个像素艺术应用程序，到目前为止一切顺利。您可以在像素网格上绘图。我想要弄清楚的是，如何将艺术渲染到 html 画布上。我知道有drawImage()，...

canvas grid render pixel generate

回答 1 投票 0

带有 Flex-Wrap 的 Flexbox 会留下不需要的水平空白空间

在此示例中： https://jsbin.com/sehuqowuca/edit?html,css,输出如果我将视图大小调整到 508px 到 334px 之间，则会留下一个水平空间，并且由于 item2 高度 t 而无法填充它...

html css flexbox grid

回答 1 投票 0

BULMA：如何使第一列的宽度相等？只能用桌子吗？

使用 Bulma 构建网页我想以这种方式显示几个事件：使用 Bulma 构建网页我想以这种方式显示多个事件： <div class="card" style="background: lightgreen;"> <div class="card-header p-4"> <div class="is-flex is-flex-direction-row "> <div class="has-text-right pr-4 is-one-quarter" style="white-space: nowrap;"> <strong>[1st column]</strong><br/> 参见 https://codepen.io/baschtl/pen/PobXamm 但我希望每个“行/行”的第一列始终具有相同的宽度。但也许这只能通过使用良好的旧 TABLE 元素 [https://bulma.io/documentation/elements/table/] 而不是列或其他东西来实现？非常感谢！温度您可以使用 is-x 类来固定第一列的宽度，可以是 is-1 到 is-12。 <div class="columns"> <div class="column is-1"></div> <div class="column"></div> </div> 我不熟悉这个框架，但这在 CSS 中非常简单。您可以向每个第一个元素添加一个具有宽度的类，如下所示 .width-fix{ width:10rem; } 您的 html（减去空白：nowrap 并添加宽度固定类）： <div class="card" style="background: lightgreen;"> <div class="card-header p-4"> <div class="is-flex is-flex-direction-row "> <div class="width-fix has-text-right pr-4 is-one-quarter"> <strong>[1st column]</strong><br/> Saturday<br /><strong>27th May 2022</strong> </div> <div class="pr-4" style="min-width: 80px;"> <strong>[2nd column]</strong><br/> <a href="#" target="_blank"> <figure class="image is-128x128"> <img class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png"> </figure> </a> </div> 还要记住，如果您确实需要一张桌子，那么使用桌子也不错，所以您也可以考虑这一点。聚会有点晚了，但仍然：最近我有类似的需求，并设法使用column is-narrow（而不是column is-3或column is-one-quarter）+为每行中的<div>设置固定宽度的东西来使其工作。幸运的是，我能够计算出适用于我所有行中所有此类单元格的 width 值。如果您的数据更加动态，那么您可能需要在运行时计算它。请注意，is-narrow 设计为与至少一个其他 <div className="column"> without 类名称中的 is-... 结合使用，然后它会自动调整大小以填充剩余宽度。示例： const rows = ... // array of row data const width = 320; // calculated during development or at runtime return rows.map(row => <div key={row.id} className="columns"> <div className="column is-narrow" style={{ width }}> {row.text1} </div> <div className="column is-4"> {row.text2} </div> <div className="column"> {row.text3} </div> </div> );

css flexbox grid multiple-columns bulma

回答 3 投票 0

CSS 网格间隙对于屏幕来说不存在

我正在尝试使用CSS3中的网格结构，我无法使用grid-gap功能，当我输入grid-gap时，它不会出现在屏幕上。你能帮忙吗？

html css grid

回答 2 投票 0

二维矩阵上的均匀分布算法

这是我的问题：我有一个 int[,] 对象（一个二维整数数组），其中充满了大小为 N^2 的 0。这是我的游戏地图的基础。M 现在我需要获取这个数组并使用以下参数：

matrix random grid generator world-map

回答 1 投票 0

带有网格或弹性框的响应式输入+按钮（无媒体查询）

我在使用 Flexbox 或网格布局进行一些 CSS 分发时遇到了麻烦，事情是这样的：我有一个具有下一个配置的容器（75% 输入，25% 按钮）：这种性格应该是...

css flexbox grid media-queries

回答 1 投票 0

我们如何在.net maui 中以编程方式按名称获取网格项

在Xamarin中我用过按钮 Button = (Button ) grdOptions.RowDefinitions.Where(c => c.ClassId == "btn" + name).First(); 但在 .Net maui 中没有 ClassId 字段。有没有其他的...

grid maui

回答 1 投票 0

VerticalGridView 水平滚动

我终于成功将 Android 支持库中的 VerticalGridView 添加到我的项目中。现在的问题是网格水平和垂直滚动！这是我的来源：我终于成功将 Android 支持库中的 VerticalGridView 添加到我的项目中。现在的问题是网格水平和垂直滚动！这是我的来源： <android.support.v17.leanback.widget.VerticalGridView android:id="@+id/my_recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" /> 和java代码： mRecyclerView = (VerticalGridView) rootView.findViewById(R.id.my_recycler_view); mRecyclerView.setHasFixedSize(true); mRecyclerView.setNumColumns(4); mRecyclerView.setVerticalMargin(24); 我已经找到了解决这个问题的方法。您只需将 android.support.v7.widget.GridLayoutManager 设置为 VerticalGridView 的布局管理器，如下所示（请注意，列数在构造函数中传递）： mRecyclerView = (VerticalGridView) rootView.findViewById(R.id.my_recycler_view); mRecyclerView.setLayoutManager(new GridLayoutManager(context, 4)); mRecyclerView.setHasFixedSize(true); mRecyclerView.setVerticalMargin(24); 无论你选择哪一个，你都可以拿着这个列表双向滚动，感觉就像可以在屏幕上移动一样。必须有一种方法可以禁用一个方向的滚动有办法处理吗？在使用扩展 VerticalGridSupportFragment 的片段时，我遇到了同样的问题。解决方案是使用自定义 VerticalGridPresenter，并在此应用自定义 GridLayoutManager。在你的片段中： VerticalGridPresenter gridPresenter = new CustomVerticalGridPresenter(FocusHighlight.ZOOM_FACTOR_SMALL, false); CustomVerticalGridPresenter 类： public class CustomVerticalGridPresenter extends VerticalGridPresenter { public CustomVerticalGridPresenter(int focusZoomFactor, boolean useFocusDimmer) { super(focusZoomFactor, useFocusDimmer); } @SuppressLint("ClickableViewAccessibility") @Override protected ViewHolder createGridViewHolder(ViewGroup parent) { ViewHolder vh = super.createGridViewHolder(parent); VerticalGridView gridView = vh.getGridView(); // Apply our custom LayoutManager that disables horizontal scrolling NoHorizontalScrollGridLayoutManager layoutManager = new NoHorizontalScrollGridLayoutManager( parent.getContext(), getNumberOfColumns()); gridView.setLayoutManager(layoutManager); return vh; } } NoHorizontalScrollGridLayoutManager 类： public class NoHorizontalScrollGridLayoutManager extends GridLayoutManager { public NoHorizontalScrollGridLayoutManager(Context context, int spanCount) { super(context, spanCount); } @Override public boolean canScrollHorizontally() { // Return false to prevent horizontal scrolling return false; } @Override public boolean canScrollVertically() { // Allow vertical scrolling return true; } } 在leanback lib中有两个类：1.VerticalGridView 2.HorizontalGridView 你可以使用 HorizontalGridView 进行水平滚动

android grid android-support-library

回答 4 投票 0

使用 flex 在 CSS 网格项内定位图像、文本和链接

我正在创建一个 html/css 布局，它需要如下所示：（https://i.sstatic.net/Z49ekM8m.png）每个框都是一个链接。将活动链接区域扩展到整个框，并获取文本位置...

css image flexbox grid

回答 1 投票 0

CSS 网格打造不可预知的画廊

任何人都可以想出一种方法，可以预见地在 GRID 画廊中不会留下内容不可预测的空白吗？我知道我可以将其强制放入偶数列，然后将内容分布在这些列中

html css grid

回答 1 投票 0

Python Tkinter：在打包框架内，如何均匀分布 grid() 列宽度？

我需要使用框架小部件来执行此操作；我知道我可以在不使用框架的情况下做到这一点，只需使用一个大网格来包含所有内容（画布的列跨度等），但我想把东西放进去......