css-grid 相关问题

CSS Grid Layout是一种允许创建网格的W3C技术。它不需要使用浮动,表格,绝对定位甚至flexbox(另一种CSS3技术)来构建各种网格,从简单到复杂。一般情况下,请勿将此标记用于CSS网格系统。

css网格内的对象拟合

我根本无法使object-fit:cover在我的网格中工作。该图像显示在容器的顶部,并且始终以100%的宽度(及其正常的适当高度)显示,导致实际上不是...

回答 1 投票 0

CSS网格/自适应设计

我需要为自己创建一个投资组合网站,并在网上找到了一些非常好的示例,但是它们没有使用CSS Grids,而且由于我不是专业人士,我认为这对我来说是个不错的选择... A ...

回答 1 投票 -3

CSS网格:使所有图像覆盖相同的高度

我正在建立一个同时包含横向和纵向图像的画廊,但我无法使它们适合所有等高的图像网格(即,纵向图像的裁剪视图,因此它们不...

回答 2 投票 0

父元素左右的元素

当您从父级左右添加元素时,是否有一种均匀分布元素的方法,而父级位于中间?示例

回答 1 投票 -1

为什么在网格模板列中具有100%的显示网格超出主体?

。parent {position:fixed;宽度:100%;左:0;上:14px;显示:网格;网格模板列:40%60%; grid-gap:5px;背景:#eee; } .left {border:2px稳定的红色; } ....

回答 2 投票 0

响应式两列布局,对块进行重新排序

在移动版式上,按照重要性顺序,我有六个div,一个在另一个下面。在台式机上,我想重新排序商品。在下面的图像中,移动布局在左侧,桌面布局在...

回答 2 投票 0

如何使用CSS网格制作自动平衡内容列

因此,这是我在过去20年中基本上迷恋的一种布局-具有能够在两列报纸样式之间自动流动的内容列表的功能。 ...

回答 1 投票 0

如何在网格行的末尾添加空白而不拉伸项目

我正在尝试布局一个容器div来填充屏幕的大小,但我希望空行的宽度最小,例如40像素,最后一行之后只有空白。但是内容会延伸...

回答 1 投票 0

CSS网格布局:是否可以使其中一项宽度超过网格100%?

我正在寻找一种方法来使其中一个网格项目的宽度为100%,但我不知道这是否可能首先是宽度CSS网格布局。这是我要实现的布局图。 ...

回答 1 投票 -2

我可以在JavaScript中使用动态的单元格/行来模拟CSS网格吗?

我想做的是使CSS网格具有动态数量的单元格。为了简单起见,让我们假设每行始终有四个单元格。我可以指定具有这样的动态数字的网格吗?

回答 4 投票 34

我可以在JavaScript中模拟具有动态单元格/行数的CSS网格吗?

我想做的是使CSS网格具有动态数量的单元格。为了简单起见,让我们假设每行始终有四个单元格。我可以指定具有这样的动态数字的网格吗?

回答 4 投票 34

如何在CSS网格间隙之间填充文本?

我有以下HTML: ... ... ... 有没有办法...

回答 1 投票 -1

CSS网格未在实际的移动浏览器上正确显示(尽管在台式机上测试移动屏幕时,所有显示均正确显示)

CSS网格未在实际的移动浏览器上正确显示(尽管在台式机上测试移动屏幕时,所有显示均正确显示)。如果我在桌面浏览器上打开应用程序并使用浏览器的...

回答 1 投票 0

我如何将网格容器水平地对准窗口? [重复]

我已经看到了许多有关网格元素的答案,但是我想水平放置网格容器。这是我现在拥有的代码段。 .htable {grid-row:1/2; ...

回答 1 投票 1

为什么右边距不起作用? CSS网格

我使用css网格,并且我希望内容类的每一边都有15px的边距,但是右边的边距不起作用。我究竟做错了什么?我希望.content的宽度为100%,并留有余量...

回答 1 投票 0

在内部网格线上对齐子元素

我有一个简单的CSS网格布局,其中包含三列。我需要使第一行的背景在整个轨道上延伸,但要使子元素在内部网格线上对齐,例如标准的导航栏...

回答 1 投票 0


在行的列中拉伸div

如何在此列中将该div拉伸为与右侧相同的高度?我正在使用bootstrap v4和rails,而我只是对这个简单的任务不知所措。它们是div的内容,分为两个...

回答 4 投票 0

如何设置这样的元素?

我正在写一个页面,现在我正在设置联系方式的样式,但我不知道如何设置图片上的这3个元素。我认为我应该使用网格,但是不起作用,请在此处输入图像描述

回答 1 投票 0

如何在CSS网格布局中排成第n行?

[我正在尝试使用CSS网格布局来做类似的事情:| |姓名|首字母缩写|功能介绍店铺| ID |订单号|订单开始|日期结束日期| |店铺| ID |订单号| ...

回答 2 投票 0

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