提问搜索_PHP中文网

社区学习工具库休闲

简体中文

热门搜索：
PHP
MySQL
jquery
HTML
CSS

CSS 网格布局，自动添加行并将列宽度设置为最大网格项目宽度

我想要一个具有任意数量的网格项的网格布局，当一个网格项被填充时，它会自动创建一个新行，有点像：#grid{display:grid;width:256px;border:1pxsolidblack;grid-gap:12px;grid-template-columns:repeat(auto-fit,minmax(75px,1fr));}#gridspan{background-color:lig

P粉818317410 2024-03-28 11:13:36

限制内容扩展的网格项

TL;DR:是否有类似于table-layout:fixed的CSS网格布局的属性？我试图创建一个年视图的日历，其中有一个4x3的大网格用于月份，内部嵌套的是7x6的网格用于日期。日历应该填满整个页面，所以年份网格容器的宽度和高度都设置为100%。.year-grid{width:100%;height:100%;display:grid;grid-template:repeat(3,1fr)/r

P粉199248808 2023-08-20 19:49:37

为什么具有固定宽度和最大宽度为90%的网格子项会溢出网格轨道？

问题：我的问题非常简单，我想知道为什么.header元素在达到1500像素的视口宽度时会溢出其网格轨道。代码：*{box-sizing:border-box;padding:0;margin:0;}body{background:#6e28d9;color:white;}.container{display:grid;grid-template-areas:'header';grid-templa

P粉471207302 2024-04-05 14:33:39

行不均匀的 CSS 网格（Pinterest 风格）

我正在尝试创建一个3列多行的链接网格（img+文本）。问题是我的图像高度不一样，所以我得到这样的结果：我正在尝试查找需要什么CSS网格属性才能获得这样的结果。我尝试只做3个div（每列），其中包含多个链接，但响应时顺序不正确。你们能帮忙吗？非常感谢。

P粉710478990 2023-09-09 14:12:15

无法使用 svg 图像创建响应式网格区域

在我尝试创建一个包含svg图像的响应式网格区域时，我遇到了奇怪的行为，例如任意网格区域宽度，以及无法让图像增大或缩小到某个点而不停止。我得到的最接近的是：*{box-sizing:border-box;}body{margin:0;}header{display:grid;grid-template-columns:auto1fr;background-color:green;padding:1r

P粉022140576 2023-08-30 19:15:16

使网格单元格内容居中对齐

我想在网格项内部居中对齐内容，水平居中但垂直不居中。在JSfiddle上查看：http://jsfiddle.net/6zs8ydhf/.container{display:grid;grid-template-columns:200pxauto;grid-template-rows:400px200px;}.item{border:1pxsolid#111;}.item2h1{display:f

P粉060528326 2023-09-15 10:34:15

CSS Grid布局：将跨越多行的元素的基线与其他列的底部行对齐。

我想对齐目录的基线。#grid{display:grid;grid-template-columns:1fr1fr;align-items:baseline;}#a{grid-row:1/span2;grid-column:1;padding:8px;background:red;}#b{grid-row:1;grid-column:2;background:yellow;}#c{grid-row

P粉032649413 2023-08-02 15:26:53

为什么使用网格模板区域显示网格不起作用？

我试图通过网格模板区域实现元素排列，但它不起作用。我正在尝试使用网格系统垂直和水平排列块。使用左侧的图片和另一侧的文字。为什么这段代码不起作用？.news__wrapper{display:grid;grid-template-areas:"aac""bbc";}.news__item{display:flex;align-items:center;just

P粉541796322 2023-09-09 16:28:13

如何将网格元素放置在容器的尾部

我有一个网格容器，我希望我的项目放在底部。我有这个实际的我想要这样的期望.container{display:grid;grid-template-columns:repeat(14,1fr);grid-template-rows:repeat(6,1fr);grid-gap:8px;width:200px;background:blue;}.item{background-color:red;c

P粉387108772 2023-08-28 13:48:05

如何使用 CSS 网格在我的 div 中实现网格系统？

我想创建一个包含2列的div，当我在父div中添加一个项目时，它应该位于第一列中，当第一列有3个元素并且我想添加其他项目时，它应该位于第二栏。这是我正在寻找的图像：我在互联网上没有找到回应，我尝试过css网格生成器，但没有任何结果..CSS网格生成器，但我无法得到正确的答案

P粉195200437 2023-09-08 16:03:49

右侧对齐网格元素的方法

我在CSSGrid布局中有固定数量的列，并且有要放置在这些列中的元素。要放置的元素数量小于列的数量。我希望这些列向右对齐，按照元素添加的顺序。在下面的代码中，有4个元素向左对齐，其右侧有6个空元素：.hello{border-style:solid;border-color:blue;}.container{display:grid;grid-gap:5px;grid-template-colum

P粉296080076 2023-08-13 11:27:01

grid-template-rows: Repeat(auto-fill, 80px) 可以与 grid-auto-rows: 80px 互换使用吗？

我希望网格在添加动态内容时根据需要添加更多行。这就能解决问题：.grid{display:grid;grid-template-rows:80px;grid-auto-rows:80px;//grid-template-rows:repeat(auto-fill,80px);grid-template-columns:repeat(auto-fit,minmax(340px,1fr));grid-

P粉823268006 2023-09-12 21:10:45

裁剪和移动图像。网格布局

我正在努力将图像放在正确的位置并将其裁剪在顶部和底部。这就是它应该看起来的样子（英雄部分）：https://www.behance.net/gallery/161732057/CozyMornings-online-store整个项目是在网格上构建的。我需要一个向左移动的圆形图像，大于容器并在顶部和底部进行裁剪。此外，它应该具有响应能力。我试图将图像放入包装中。给这个包装器相对位置并隐藏溢出。这不

P粉548512637 2023-09-15 19:18:46

导航元素不受display: grid影响

我在一个设置为网格显示的导航栏中有一些ulli元素，但它不像我预期的那样工作。li元素显示出来好像没有应用网格。这是代码：*{padding:0;margin:0;}.grid-container{display:inline-grid;grid-auto-columns:autoautoautoauto;text-decoration:none;}.grid-containerli{list-s

P粉295728625 2023-09-20 12:05:51

CSS网格布局方格单元格

我想要创建一个类似仪表盘的视图，其中使用CSSGrid-Layout作为基础。我希望在整个屏幕的长度上分布16列（应该是响应式的）。然后，单元格的高度应该由单元格的宽度决定，以使单元格成为正方形。问题是，我希望某些单元格跨越多个单元格。例如，我想要一个占用2x1个单元格的元素。所以我有基本的网格布局：.grid-container{display:grid;grid-template-column

P粉593536104 2023-08-15 20:13:32

Div 使用 JavaScript 旋转和展开以显示网格图库

我想让一个div旋转onclick以显示背面的网格画廊。老实说，我不知道从哪里开始。<ulclass="container-fluidtext-centerrow"id="gallery2"><liclass="col-12col-sm-4col-md-12text-center"><imgsrc=&quot

P粉398117857 2024-04-02 23:12:45

网格模板列不对齐行上的项目

我是HTML和CSS新手，我正在尝试使用grid-template-column创建导航栏。我的想法是将导航栏分为3个部分：徽标部分、网站主页部分和社交链接部分。问题在于divnavBar内的元素未连续对齐，但menuItemsdiv内的div和Socialsdiv内的元素正确对齐，但它们之间的间距过大。我缺少什么吗？html{background:#FFFFFF;}body{background

P粉696605833 2024-04-03 16:58:18

我无法设置使用 Tailwind CSS 创建的仪表板的网格结构

我正在使用TailwindCSS编写仪表板前端。我创建了页面的网格结构并将我的组件放置在其中。然而，所有列的宽度和长度都是相等的。有些组件通常需要看起来更宽，所以我添加的一些组件与Figma文件不匹配。我该如何解决这个问题？我的页面的代码：//Components//LayoutsimportDashboardLayoutfrom"@/layouts/dashboard"//I

P粉186904731 2023-09-10 18:06:41

如何制作网格布局扩展的动画？

我想知道如何为网格布局的扩展设置动画。正如你在代码中看到的，我有4个div。其中两个会显示，另外两个仅在选中该复选框时才显示。选中该复选框后，将添加另一行，其中包含div3和div4。我如何使扩展动画化？最好保持网格的大小。我不希望动画影响（不存在的）边距。我也想在没有JavaScript的情况下做到这一点。可能吗？<!DOCTYPEhtml><html><head&

P粉937382230 2023-08-31 21:09:37

自定义Angular Material UI CSS样式

我想用粘贴在下面的垫子网格瓷砖和已布线的瓷砖作为普通垫子网格瓷砖的内容。问题是，当我使用垫子网格瓷砖时，中心显示的潜在设计，以及注意到底部的方式。从行顺序中禁用后，所有

P粉696146205 2023-08-02 21:58:40