grid 相关问题

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

使用 CSS 网格时，图像高度在 Safari 上无法正常工作

嗨，我在尝试将图像“适合”CSS 网格容器时遇到了一些麻烦（该问题仅在使用 Safari、Firefox 和 Chrome 时发生，没问题。）问题是，img 高度

html css image flexbox grid

回答 2 投票 0

如何正确设置显示网格内的绝对元素？

我有下面的代码片段，我想要实现的是.child（面板）不应该显示在.content类的顶部，但是，.child设置在.data类的顶部。我不明白...

html css grid css-position

回答 1 投票 0

如何确保仅使用网格、边框和流布局管理器对齐这些字段？ JAVA SWING GUI开发

我想对齐这些字段，而不必求助于 setPreferredSize。我是一名学生。这是我复制它的目标。这是一份家庭作业，我一直在努力让它对齐

java user-interface grid alignment border

回答 1 投票 0

我应该使用网格吗？或者对于这样的行动你有什么建议？

我不知道在这种情况下该使用什么我想要简历（img）在左边，传记（p）在中间宽，右边在同一区域有输入（电子邮件），文本区域和屁股......

html css layout flexbox grid

回答 2 投票 0

简单网格布局中的图像

如何使绿色图像占据每个矩形的整个区域？我使用这段代码，但某处有错误： HTML代码和CSS代码：。网格 { 位置：相对；我...

html css layout grid

回答 3 投票 0

CSS 网格图像响应式

我正在尝试创建一个小的图像网格。在桌面上，我想要每列 3 个图像，在移动设备上，我想要每列 2 个图像。我这样做没有问题。当我缩小页面时，问题就开始了......

css responsive-design grid css-grid

回答 1 投票 0

响应式网格中的响应式图像

我创建了一个响应式网格，效果很好，但我想在其中插入图像，这些图像会在网格收缩时收缩。这是我的网格。我将使用什么在每个部分插入 1 张图像...

html grid

回答 2 投票 0

JavaScript WebGrid 类型游戏

我是一个初学者，只有2个月的前端经验。我正在尝试制作一个简单的网络网格游戏。我有一个 10x10 网格表（其中包含 100 个 div 子元素的网格容器），我的目标是...

javascript html grid

回答 1 投票 0

通过 Bootstrap4 对列进行排序

我有 3 列，我想在桌面和移动设备上以不同的方式订购。目前，我的网格如下所示： 1 我有 3 列，我想在桌面和移动设备上以不同的方式订购。目前，我的网格如下所示： <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div> 在移动视图中我希望有以下输出： 1-3-2 不幸的是，我不知道如何使用 Bootstrap 4 中的 .col-md-push-* 和 .col-md-pull-* 类来解决这个问题。 2021 - Bootstrap 5 响应式订购类现在为 order-first、order-last 和 order-0 - order-5 演示 2018 - Bootstrap 4 响应式订购课程现在为order-first、order-last和order-0 - order-12 Bootstrap 4 **push** **pull** 类现在为 `push-{viewport}-{units}` 和 `pull-{viewport}-{units}`，并且 `xs-` 中缀已被删除。要在 mobile/xs 上获得所需的 1-3-2 布局，请执行以下操作：[Bootstrap 4 推拉演示](http://www.codeply.com/go/OmrcmebUp)（这只适用于 4.0 beta 之前的版本）引导程序4.1+ 由于 Bootstrap 4 是 Flexbox，因此很容易更改列的顺序。列可以从 order-1 到 order-12 进行排序，例如相对于父级 order-md-12 order-2 的 md（最后一个在 xs，第二个在 .row）。 <div class="container"> <div class="row"> <div class="col-3 col-md-6"> <div class="card card-body">1</div> </div> <div class="col-6 col-md-12 order-2 order-md-12"> <div class="card card-body">3</div> </div> <div class="col-3 col-md-6 order-3"> <div class="card card-body">2</div> </div> </div> </div> 演示：使用order-*类更改顺序桌面（较大屏幕）：移动设备（较小的屏幕）：还可以使用 flexbox 方向实用程序... 更改列顺序 <div class="container"> <div class="row flex-column-reverse flex-md-row"> <div class="col-md-8"> 2 </div> <div class="col-md-4"> 1st on mobile </div> </div> </div> 演示：Bootstrap 4.1 使用 Flexbox 方向更改顺序旧版本演示演示 - 阿尔法 6 演示 - 测试版 (3) 查看更多 Bootstrap 4.1+ 订购演示相关 Bootstrap 4 中使用推/拉和 col-md-12 的列排序 Bootstrap 4 更改列的顺序 A-C-B A-B-C 这也可以通过 CSS“Order”属性和媒体查询来实现。类似这样的： @media only screen and (max-width: 768px) { #first { order: 2; } #second { order: 4; } #third { order: 1; } #fourth { order: 3; } } CodePen 链接：https://codepen.io/preston206/pen/EwrXqm 即使这样也行： <div class="container"> <div class="row"> <div class="col-4 col-sm-4 col-md-6 order-1"> 1 </div> <div class="col-4 col-sm-4 col-md-6 order-3"> 2 </div> <div class="col-4 col-sm-4 col-md-12 order-2"> 3 </div> </div> </div> 我正在使用 Bootstrap 3，所以我不知道是否有更简单的方法来实现 Bootstrap 4，但这个 css 应该适合你： .pull-right-xs { float: right; } @media (min-width: 768px) { .pull-right-xs { float: left; } } ...并将类添加到第二列： <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6 pull-right-xs"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div> 编辑：哦...看起来我上面写的正是 Bootstrap 4 中的 .pull-xs-right 类：X 只需将其添加到第二列，它应该可以完美工作。将此类用于第一列第二个：第三：由于列排序在 Bootstrap 4 beta 中不起作用，如上面重新访问的答案中提供的代码中所述，您将需要使用以下内容（如 codeply 4 Flexbox 顺序演示 - 提供的 alpha/beta 链接中所示）在答案中）。 <div class="container"> <div class="row"> <div class="col-3 col-md-6"> <div class="card card-block">1</div> </div> <div class="col-6 col-md-12 flex-md-last"> <div class="card card-block">3</div> </div> <div class="col-3 col-md-6 "> <div class="card card-block">2</div> </div> </div> 但请注意，“Flexbox order demo - beta”进入了 alpha 代码库，并将代码库更改为 Beta（并运行它）会导致 div 错误地显示在单列中 - 但这看起来像是一个 codeply 问题，因为切割并将代码粘贴到 codeply 之外的工作方式如上所述。您可以做两个不同的容器，一个使用移动订单并隐藏在桌面屏幕上，另一个使用桌面订单并隐藏在移动屏幕上

css twitter-bootstrap bootstrap-4 grid

回答 7 投票 0

Vaadin 中网格列的宽度调整了吗？

我如何告诉 Vaadin 中的网格将其列的宽度调整为其条目的长度？（为了使用尽可能少的空间）我开发了需要网格的应用程序...

java eclipse grid vaadin

回答 3 投票 0

我可以在magento网格中的“添加新”按钮上更改“创建url”吗

我想要的是更改“添加新”按钮的操作类 World_Exporter_Block_Adminhtml_Attribute 扩展 Mage_Adminhtml_Block_Widget_Grid_Container{ 公共函数 __construct() ...

php magento grid

回答 2 投票 0

如何固定Legend特定颜色的值？

我尝试使用两组数据Data1和Data2来绘制同一区域的产量（median_mafruit）。我想修复图例不同值区域之间的颜色。我的代码如下：图书馆（