腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
1
回答
使用css网格
html
、
css
、
css-grid
按照描述的技术,我尝试创建一个css网格,其中我的图像将比居中的文本列更宽。然而,我无法使它发挥作用,我不知道为什么。 我的HTML: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <main class="grid"> <div> <p>Lore
浏览 1
提问于2019-04-25
得票数 2
1
回答
使用JQuery范围滑块实时更新CSS值
javascript
、
jquery
、
html
、
css
、
rangeslider
我正在尝试使用单独的范围滑块实时更新以下CSS属性(具体地说,minmax(20vw)、grid-update和height): #wrapper { grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); grid-gap: 20px; } #item { height: 150px; } 我使用的是CSS网格和一些'VW值‘,所以我不确定我是不是把事情复杂化了。我真的不知道从何说起。 实时可编辑代码: 更新:每个单独的范围滑块应该分别更新每个属性: 滑块1:栅格间隙 滑块2: Div宽度 滑块3: Div高度
浏览 2
提问于2018-01-25
得票数 1
1
回答
如何解释“网格-模板-列:1 3fr自动最小(800 do,3fr) 1 3fr;”?
html
、
css
、
web
“网格-模板列:1 1fr自动最小(600 1fr,3fr) 1FR”是什么意思?我理解1 3fr在开始和结束,但我搞不懂什么“自动最小(600 at,3fr)”。 HTML: <a class="logo" href="index-new.html"><img src="images/logo-b.png" alt="logo"></a> <input type="checkbox" id="nav-toggle" clas
浏览 3
提问于2020-06-12
得票数 0
回答已采纳
1
回答
边缘和Safari在网格中的滑动溢出
javascript
、
css
、
safari
、
microsoft-edge
、
swiper.js
与火狐和Chrome一起工作。显然,我的网格布局打破了边缘和Safari (没有display: grid,这个小提琴将适用于Safari和Edge)。但是,我不想用柔性盒代替网格。 如何在使用display: grid时使其在边缘和Safari中工作 var swiper = new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); body
浏览 1
提问于2019-11-06
得票数 2
回答已采纳
1
回答
向孙辈传播CSS网格大小,以获取vuetify v卡映像。
css
、
vuetify.js
、
css-grid
我试图在css网格中排列带有图像的虚拟卡片,但是v卡的v-img没有看到它的大小,因为它是一个外孙。如何将网格大小向下传播到v? 我希望图片填写卡片,类似于flex-box版本()。 这是我想要的样子,根据窗口大小自动调整图像大小。 new Vue({ el: "#app", vuetify: new Vuetify(), data: () => ({}) }); .grid { display: grid; height: calc(100vh - 64px - 60px); grid-template-columns: 1fr 1
浏览 2
提问于2020-05-11
得票数 1
回答已采纳
1
回答
如何让我的网格留在它的容器内?
javascript
、
html
、
css
我正试图在我的网格中安装16x16或64x64的网格(大小并不重要)。我正在考虑使用flexbox,但我不知道如何实现它。我希望我的网格根据容器的大小缩小和扩展,而不是被弹出容器之外。 ```<html lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-
浏览 2
提问于2022-03-24
得票数 0
2
回答
IE和MS边缘不工作的CSS网格自动宽度
css
、
internet-explorer-11
、
microsoft-edge
、
css-grid
有一个IE和边缘特定的问题。玩弄"CSS网格布局“和auto宽度似乎不适用于IE10/11,甚至在最新版本的边缘。(在Chrome和FireFox中运行良好。) .test { width 100%; } .test #contain { display: -ms-grid; display: grid; -ms-grid-columns: 50px 10px auto; -ms-grid-rows: 50px; grid-template-columns: 50px auto; grid-template-rows: 50px; grid-co
浏览 7
提问于2017-07-30
得票数 3
回答已采纳
1
回答
CSS网格和响应式设计的问题
html
、
css
、
css-grid
我正在制作一个“图书社交媒体”,我在响应式设计方面遇到了问题 下面是HTML的代码: <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Inicio</title> <
浏览 18
提问于2020-11-14
得票数 2
1
回答
为什么文本会离开网格框?
css
、
css-grid
为什么网格框的大小不改变取决于字体大小,因为当前在页眉和页脚元素中的文本在我放置字体大小:25;时不在框内?我是否需要将所有元素放到div中才能这样做?如果你想帮我解决这个问题,请解释一下你做了什么来解决这个问题。谢谢 :root { --light: #666666; --dark: #000000; } body { display: grid; grid-template-areas: "header header header" "nav article article" "footer footer foot
浏览 0
提问于2018-12-05
得票数 3
回答已采纳
2
回答
CSS网格海军!如何在中间对齐2个div,并在网站上展开的最左侧和右侧有1列?
javascript
、
html
、
css
、
navigationbar
我对网络开发非常陌生,但我有很多乐趣。我只是想弄清楚我应该如何有效地做这件事。我正在尝试使用CSS网格制作一个响应型导航条,尽管我还没有真正了解到响应点。目前,我有两个div,navbar (我的导航链接)和设置(还不完全确定我在用它做什么,包括主题选择之类的选项),我需要这2个div以为中心,并在最左边有一个列,当窗口伸展到足够远的时候,这个列就会向右延伸。 如果可能的话,我还想在导航链接的样式方面提供一些帮助,即使我添加了文本装饰: none;,我也很难去掉下划线。这也是我第一次在StackOverflow上,所以请告诉我,如果我做错了什么在这里。 HTML <head>
浏览 2
提问于2020-03-31
得票数 0
回答已采纳
2
回答
CSS网格布局问题-内容重叠模板区域
html
、
css
、
css-grid
我刚刚开始学习CSS网格,而不是使用bootstrap等。 我已经为header,nav,main,aside,footer创建了行和列。 但是当我在header内部创建<div>时,它会与边界重叠,我不知道为什么。行高应该随着内容的增加而增加...这就是我使用minmax(150px,auto)的原因。 html为: <nav>Nav</nav> <header><div class="header-image"></div></header> <main>Main</ma
浏览 27
提问于2020-09-16
得票数 0
1
回答
垂直对齐Bootstrap 4 div中的文本(使用btn类),在使用CSS网格时没有固定高度(并且没有flexbox)
css
、
twitter-bootstrap
、
bootstrap-4
、
vertical-alignment
、
css-grid
我有一个带有Bootstrap4div和btn标签的CSS Grid。divs垂直加宽(拉伸)。我只需要在中间垂直对齐文本即可。 我知道我可以使用flexbox,但在这个项目中我不能。 下面是一个示例: .grid-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(20vmax, 1fr)); grid-gap: 0.5rem; height: 100vh; } <link href="https://cdnjs.cloudflare.com/ajax/li
浏览 1
提问于2019-03-10
得票数 2
2
回答
如何为css网格行设置最大高度
html
、
css
我正在尝试将40px的最大高度设置为CSS网格的第二行。 容器的宽度未知,因此它应该是响应的。 此外,每个框的内容都是未知的。 我尝试了grid-template-rows: auto minmax(0, 40px);,但不幸的是,如果没有第二行,它也会将高度设置为40 if。 有没有办法使用grid-template-rows并防止第二行增长到40px? 下面是一个示例,您可以看到第二行占用空间,尽管没有网格项: ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); g
浏览 4
提问于2022-02-08
得票数 2
回答已采纳
1
回答
CSS网格布局中的minmax()
html
、
css
、
css-grid
、
grid-layout
我面临着与CSS网格布局相关的minmax()函数的一些问题。 这是我的代码: * { box-sizing: border-box; } .grid { display: grid; grid-template-columns: minmax(150px, 250px) 1fr 1fr; grid-gap: 20px; } .grid div { border: 1px solid rgb(0, 95, 107); border-radius: 3px; background: rgba(0, 95, 107, 0.8); padding: 0.2em
浏览 6
提问于2016-12-17
得票数 3
1
回答
CSS网格行不是自动调整大小的。
html
、
css
、
css-grid
我有一个CSS网格,包含三列和两行。我希望行的高度调整大小以适应内容。所以,我使用grid-template-rows: auto auto;作为article-container。但是,第一行没有正确调整大小。第一行的内容下面有很大的差距。我也尝试过使用grid-auto-rows: auto;,但是,它不起作用。 .article-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; margin-left: 20%; ma
浏览 7
提问于2022-07-15
得票数 0
1
回答
我不知道为什么我的标题和描述之间有这么大的差距。
html
、
css
我是新手的CSS网格和编码一般tbh。我正在尝试为我的网站制作一个商店页面,我不明白为什么我的标题和div中带有" title -container“类的描述之间有如此大的差距。 提前感谢你的帮助, .container { display: grid; grid-template-rows: minmax(1000px, auto); grid-template-columns: 1fr 4fr; background-color: red; } .sidebar { background-color: blue; } .product-side {
浏览 0
提问于2020-07-14
得票数 0
1
回答
CSS网格与Breaking布局。如何为不同页面上的内容设置不同的大小?
html
、
css
、
css-grid
我有一个网格布局。我使用移动优先的方法构建它,这意味着默认情况下(媒体查询之外)所有内容都是针对移动的。 桌面布局如下所示: 我有一个被设置为80em的“主”内容区域。让我们假设这是网站的主页。 但是,如果我需要在某些页面上的“主”区域更窄一点,比如联系人页面,也许是70em而不是80em,但仍然居中,我该怎么办呢? 在网格中,我有以下内容: .grid-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 80em) minmax(0, 1fr); grid-templa
浏览 0
提问于2021-03-29
得票数 0
1
回答
避免在网格CSS/HTML中创建空单元格
html
、
css
、
css-grid
下面或多或少是我想要的,但它并不完美:网格中有一些空白: 有没有办法避免这些差距?这能用纯CSS实现吗?请在下面找到我的HTML和CSS: HTML: <div class="image-canvas"> <div class='placeholder'></div> <div class='placeholder'></div> <div class='placeholder'></div> <div cl
浏览 5
提问于2021-09-19
得票数 0
3
回答
带栏沟的CSS网格布局
html
、
css
我需要这样的布局: 这是我的尝试: :root { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } .grid-container { display: grid; grid-template-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, 55.625em) [main-end] minmax(0, 1fr) [full-end]; } .grid-contain
浏览 45
提问于2020-06-03
得票数 3
1
回答
如何限制百分比CSS3网格列的宽度?
css
、
css-grid
我想要创建一个带有灵活列的网页布局,它可以被限制到特定的最大宽度。例如,一个侧边栏菜单占用了30%的可用水平空间,但不应该超过200‘t。 使用CSS flexbox,我将使用这样的解决方案: .flexbox-layout { display: flex; } .flexbox-sidebar { flex: 1 1 30%; max-width: 200px; background-color: lightblue; } .flexbox-content { flex: 1 1 70%; background-color: lightgreen; } <p
浏览 1
提问于2017-11-21
得票数 6
1
回答
为什么一个1FRCSS网格列会中和它的子<pre>块的“溢出:滚动”,以及为什么minmax(1px,1fr)修复它?
html
、
css
、
css-grid
在这个HTML结构中,它被放置在<body>元素中 <div class="grid-1"> <header> <a href="/">Home</a> </header> <main> <article> <h1>Test</h1> <h2 id="overview">Overview</h2> <p>Lorem ipsum.</p> &l
浏览 0
提问于2018-10-01
得票数 4
回答已采纳
3
回答
将极端项目与CSS网格对齐
html
、
css
、
css-grid
我正在尝试将这些框在两端(左和右)对齐。我主要使用CSS Grid。 左侧的框已经自然对齐,但右侧的框与起点对齐。 .Container { background-color:yellow; display:grid; grid-template-columns: auto minmax(373px, 906px) auto; } .Div { display:grid; grid-template-columns: minmax(272px, 372px) minmax(272px, 372px); max-width:906px;
浏览 35
提问于2018-08-05
得票数 1
回答已采纳
1
回答
使用css网格的制表器表格宽度问题
css
、
css-grid
、
tabulator
我在一个页面中有一个表格,它使用css grid进行布局。当我调整浏览器的大小时,我想让表随着视图的大小而增大和缩小。这在css网格之外工作得很好,但在我的css网格内失败。使用css网格时,当浏览器调整较宽的大小时,制表器表会正确地展开,但当浏览器视图变窄时,制表器表决不会缩小。相反,会出现滚动条,并且表格仍然很宽。 var data = [ { name: '1', description: 'Description of thing 1', location: 'Location 1' }, { name: '2
浏览 2
提问于2019-11-11
得票数 0
1
回答
使用边缘44和网格-模板-列:继承
css
、
cross-browser
、
microsoft-edge
、
css-grid
我正在设计一个布局,它使用CSS-网格和使用grid-template-columns: inherit;的细分部分。基本上使用本文中描述的技术: 这在主要浏览器中很好,除了边缘44,因为grid-template-columns: inherit;似乎破坏了布局。如果我只是手工复制继承的值,它就会显示得很好。 有人知道为什么会发生这种情况,以及是否有一种方法可以在不手动复制继承值的情况下修复它? 下面是一个简短的代码片段,展示了这个问题: body { display: grid; grid-template-columns: [full-start] minmax(2em, 1
浏览 1
提问于2020-05-26
得票数 2
回答已采纳
1
回答
CSS网格布局。可以设置包含徽标的行,也可以不设置
html
、
css
、
css-grid
我有这个网格布局。 nav和footer区域占据了第1列和第4列之间的整个空间。 header、main和aside仅占用第2列和第3列之间的空间。 ? header只会有一个徽标。然而,我设计了一个CMS和标志可能会设置,可能不是,取决于用户。默认情况下没有设置徽标,但是当没有设置徽标时,我应该如何处理网格中的空白header区域? 请查看完整页面视图: :root { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; pad
浏览 19
提问于2020-06-25
得票数 1
回答已采纳
1
回答
CSS网格自动填充具有静态minmax值的列
css
、
css-grid
我想在对称网格中显示相同高度和大小的可变数量的图像。使用CSS grid和auto-fill和minmax,我希望能够为我的曲目定义一个最小和最大像素宽度,这样我就可以防止图像缩放太小,同时在用户视窗允许的情况下在单行上容纳尽可能多的图像。给定以下标记: <div class="gallery"> <a href=""> <img src="https://via.placeholder.com/300/300" alt=""> </a>
浏览 0
提问于2020-04-16
得票数 3
2
回答
CSS-网格:在指定列内自动放置(带全宽度元素的居中布局)
html
、
css
、
layout
、
multiple-columns
、
css-grid
我用网格css创建了一个布局,其中包含12列,最大宽度为12列,2列仅显示在大屏幕上。此技术基于以下。(在示例中,最大宽度设置为一个小数字,以便于检查) 我想解决的问题是: 我想使用类来确定一个元素应该有多少列宽。就像你在下面的例子中看到的,我有一个类-10和-6。类似于引导框架。 例如,有什么方法可以说具有类"col“的元素应该始终位于主列中,而忽略完整列中包含的外部列? 目前,我找到的唯一解决方案是给出一行中的第一个元素,这是正确的起点。(在示例中,它是类"main-start") 示例代码: *{ margin: 0; padding: 0; fo
浏览 4
提问于2020-08-18
得票数 1
回答已采纳
1
回答
css-网格媒体查询没有响应
css
、
css-grid
我正在使用网格,出于某种原因,在媒体查询中使用max-width似乎什么也做不了。代码如下: 代码: body { color: #fff; text-align: center; } #content { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(100px, auto); grid-gap: 1rem; grid-template-areas: 'header header header header' 'block_1
浏览 0
提问于2019-02-05
得票数 3
回答已采纳
1
回答
css网格上的粘滞标题
css
、
css-grid
我有一个漂亮的响应式css模板使用css网格,我想使这个响应式css网格的标题粘性,但由于标题和导航的设计方式,我不能让它使用固定的位置。 有没有更好的方法来处理一些我可能还没见过的网格属性? * { margin: 0; padding: 0; } body { display: grid; font-family: sans-serif; } a { text-decoration: none; color: white; } header, nav { background: blue; color: #fff; position: fixe
浏览 16
提问于2018-03-02
得票数 9
回答已采纳
1
回答
显示项目动态列表/列的最佳方法?
html
、
css
、
css-grid
我有每个州的页面,列出我们的客户提供服务的城市。我现在面临的问题是,每个页面的城市数量不同。有些页面有20页,有些页面可能只有2页。现在,我正在使用CSS,这很好,但是我的团队认为如果只有2-4个城市,就会有太多的间隔,但我不太确定该如何定位。 当只有3个城市时,: 当有很多城市的时候,: CSS .local-listings { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); } <div class=""> <ul class
浏览 0
提问于2020-10-05
得票数 0
回答已采纳
1
回答
边缘问题: CSS网格单元中高度100%获得100%宽度的值
css
、
microsoft-edge
、
css-grid
我试图使用CSS网格在标题/标题区域中垂直和水平地居中一些文本,并使该区域(以及整个布局)具有一定的灵活性/响应性。 我已经在这个中设置了一个简单的示例,但是如果您不想去那里,示例中的HTML和CSS如下所示: <div class='layout'> <div class='titleArea'> <svg viewBox='0 0 100 100' preserveAspectRatio='xMidYMid meet'> <text x='50%'
浏览 3
提问于2019-10-30
得票数 0
2
回答
CSS无效属性值
html
、
css
、
grid
、
css-grid
我想为我的minmax设置grid-template-columns属性。但出于某种原因我没能让它起作用。 这是我的密码: .start { width: 100%; display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr); grid-template-rows: auto; grid-gap: 2%; } <div class="start"> <div class="news"></div
浏览 3
提问于2017-10-24
得票数 3
回答已采纳
1
回答
当网格高度大于页面(设备)高度时,css网格容器出现问题
css
、
css-grid
我有一个关于css网格的问题,我用css网格构建了一个带有两个div的容器,我想调整容器到页面中心。我使用以下代码: html{ width: 100vw; height : 100vh; } body{ height : 100%; } .container-fluid{ width:100%; height : 100%; display:grid; grid-template-columns: 300px; grid-template-rows: 200px auto; justify-content: ce
浏览 14
提问于2021-05-01
得票数 1
回答已采纳
1
回答
CSS网格-模板-区域占用空间,即使列和行是空的。
html
、
css
、
css-grid
我有一个NAV,它包含要显示的条件项。我使用CSS网格来构建它,使用网格模板区域。但是,当项目不可用时,它仍然为这些项目留出空间。我怎么才能避免。我不想在这些物品之间留出任何空间。 注意:我知道我可以使用网格模板列,但是,我想知道是否有一种使用网格模板区域的方法。如果没有,我将使用网格模板列。而且,我不想使用任何条件类. *{ margin: 0; box-sizing: border-box; } nav{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1
浏览 3
提问于2021-05-11
得票数 0
2
回答
Css网格fr单元
css
、
css-grid
在Css网格中我可以这样做: .grid { display: grid; grid-template-columns: 1fr 2fr 1fr; } 有没有办法设置特定元素的宽度。 例如: .grid { display: grid} 在html中: <div class="grid"> <p class="fr-1>text1</p> <p class="fr-2>text1</p> <p class="fr-1>text1</p> </div&
浏览 0
提问于2018-07-05
得票数 0
1
回答
网格列响应宽度但不大于或不小于
css
、
css-grid
、
responsiveness
我希望有一个css栅格与卡片,这是响应和可以增长和缩小,如在这些图片: 因此,我使用了minmax css函数: grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 但是,如果列表中没有更多的卡要放在一行中,则现有的卡片将增长到父母的极限: 如何给出最小最大函数的上限?
浏览 2
提问于2020-03-01
得票数 1
回答已采纳
2
回答
如何创建具有动态数量的网格列的TailwindCSS网格?
javascript
、
html
、
css
、
tailwind-css
我将Vue3与TailwindCSS结合使用,并希望创建一个具有动态grid-cols-{n}类的网格。我知道默认情况下TailwindCSS最多支持12列,但我无法自定义主题,因为列的数量是完全动态的。 给出以下简单的HTML / Js示例 const amountOfItemsPerRow = 16; const container = document.getElementById("container"); for (let i = 0; i < amountOfItemsPerRow; i++) { const item = document.cre
浏览 8
提问于2022-02-08
得票数 2
回答已采纳
1
回答
如何在页面宽度减小时将文本向下换行
html
、
css
、
responsive-design
、
css-grid
、
responsive-images
我正在工作内部的CSS网格结构与左侧的图像和右侧的文本块。当我减小页面宽度时,图像和文本都会调整大小以适合页面的宽度。然而,当我超过475px时,布局中断,图像和文本延伸到页面之外。 为什么会发生这种情况?我如何修复它?我已经尝试了媒体查询,但都没有用。 在我下面的技能部分,当页面宽度减小时,我可以顺着页面向下排列文本,所以我对上面的部分没有流动感到困惑。 注:原图尺寸为3024px × 4032px * { padding: 0; margin: 0; } :root { --main--color: #2E64C6; --main--hover--
浏览 20
提问于2019-09-03
得票数 0
回答已采纳
2
回答
具有CSS网格和自动匹配minmax的完全响应项。
html
、
css
、
media-queries
、
css-grid
grid-template-columns: repeat(auto-fit, minmax(600px, 1fr))的使用使得构建响应性的CSS网格变得更加容易。容器将填充符合行的元素,而不使用媒体查询。 .container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } .item { height: 100px; background: #ccc; } <div class="container"&
浏览 4
提问于2017-12-26
得票数 8
3
回答
下拉菜单与html和css,希望它保持可见,直到单击其他地方
javascript
、
html
、
css
、
drop-down-menu
、
submenu
我正在尝试制作类似于MacOS菜单栏菜单的下拉菜单(请参阅此处的代码片段)。到目前为止,他们看起来和工作都还不错,但菜单应该一直保持可见,直到用户点击(或点击)屏幕上的某个地方。就像现在一样,一旦你移出菜单,它们又变得“隐藏”了。 到目前为止,它是用纯HTML和CSS完成的,但我的直觉告诉我,这需要少量的JavaScript才能达到我想要的效果--但是我的JavaScript仍然有点欠缺。 我认为每个ul元素都需要一个将其可见性设置为"visible"的onhover事件,然后根窗口或文档需要一个onclick事件来将#菜单项第一级以下的所有内容设置为"hidden
浏览 0
提问于2018-09-27
得票数 1
2
回答
在树下更远的时候得到网格列
html
、
css
、
css-grid
我正在将一个工作的CSS设计集成到我的角度应用程序中。该设计非常成功地使用了网格和网格列,如下所示: .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(50px, auto); grid-gap: 36px 20px; margin: 0; } .single { width: auto; border: 1px solid #000; } .double { grid-column: 2 / span
浏览 0
提问于2019-07-05
得票数 1
回答已采纳
1
回答
css网格中嵌套的div位于父div之外?
html
、
css
css网格中嵌套的div位于父div之外。我怎么才能修复它?我尝试了overflow: auto hidden,但它们都不能在右嵌套的div上工作。它正在向小屏幕推出,比如桌面和iPad的移动设备,它工作得很好。 代码 <div class="projects-grid"> <div class="leftnested"> <div style={{display: 'flex', justifyContent: 'space-between'}}> <div>
浏览 10
提问于2020-03-11
得票数 0
回答已采纳
2
回答
如何在css网格中将子菜单在主菜单下对齐
css
、
css-grid
我试图将子菜单放置在CSS网格中的主菜单下,同时将鼠标悬停在多个主菜单组合上。我不知道如何在CSS网格中定位子菜单。 我从这里改编了HTML和CSS代码: 工作:当我将鼠标悬停在主菜单上时,会出现子菜单 不工作:来自多个主菜单组件的所有子菜单都出现在相同的位置,我不知道如何将它们放在主菜单组件的正下方。 HTML <ul> <li class="home menu"><a href="#home.html">Home</a> <ul class="home-dropdown"
浏览 66
提问于2019-06-13
得票数 -1
回答已采纳
1
回答
当屏幕大小改变时,如何使用CSS网格使网页重新流?
html
、
css
、
css-grid
我需要帮助重新使用CSS网格的网页,因为屏幕大小的变化。我要做到以下几点: 主列的最小宽度应为400 of; 侧边栏应该有最大宽度的内容区域(图像); 当我调整屏幕的宽度时,我希望侧边栏落在主列下面(或者类似的东西)。 我的实验是可用的。为了保持这个问题的可管理性,我没有粘贴所有的代码。我希望在CSS代码方面提供帮助。 我的重点是CSS的这一部分: .grid { display: grid; grid-gap: 10px; grid-template-columns: minmax(400px, 2fr) repeat(auto-fill, max-content);
浏览 1
提问于2017-08-02
得票数 1
1
回答
如何在不重新呈现ReactJS中特定组件的情况下更新CSS网格?
css
、
reactjs
、
css-grid
我是在一个反应网站与一个视频播放器,应该不断地在所有的路线播放。我试图找出一种方法来构建一个特定的动态布局,使用CSS来更新自身和除视频组件之外的所有组件的状态。 主要的挑战是确保视频组件不被重新呈现,以避免播放过程中的任何中断。 首页(初步)布局如下: // Code from an online generator <div class="container"> <div class="Video"></div> <div class="Content"></div>
浏览 5
提问于2022-01-29
得票数 1
回答已采纳
1
回答
如何通过更改屏幕大小来调整div的大小?
html
、
css
我正在尝试实现一个响应性布局,其中包括main content和sidebar。 侧栏应该位于主内容的右侧,一旦屏幕大小更改到600 to,它就会转到main content的底部。 问题是,当screen width > 600px时,sidebar div不调整/缩小大小,也不调整/适应浏览器。请看下面的截图。 不知道如何使它适应大小。这是密码。 * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-famil
浏览 2
提问于2022-06-08
得票数 0
回答已采纳
1
回答
Css网格最小最大换行
css
、
css-grid
我有以下3个项目的网格: <div class="grid"> <p> </p> <p> </p> <button> </button> </div> .grid { display: grid; justify-content: flex-start; align-items: flex-end; grid-template-columns: minmax(200px, 1fr) minmax
浏览 1
提问于2018-10-04
得票数 0
1
回答
在Firefox和Chrome的不同位置使用锚点链接和“定位粘性”页面的导航栏
css
这是我到目前为止所拥有的。它将在Firefox开发者版和移动chrome浏览器的导航栏下方显示链接目标“联系信息”。并在Edge和Chrome上的导航栏下停止目标。不是舒尔为什么有不同的位置和正确的位置是什么。我的代码中是否遗漏了什么? html { scroll-behavior: smooth; } body { background-image: url("img/topography.svg"), linear-gradient(110deg, #4a95c5, darkgrey); /*Old Color: #0f83ca*/ font-siz
浏览 27
提问于2019-05-11
得票数 0
1
回答
如何修复不跨越整个网格元素的悬停属性?
css
、
hover
、
css-grid
我使用CSS网格作为我的导航栏,但是我在编写链接上的悬停代码时遇到了一个错误.背景颜色的变化不扩散到整个网格元素上。 我已经使用属性align-self: stretch修复了这个问题,但是这仍然无法工作. 以下是标题HTML: <body> <header> <a href="./index.html" title="Welcome" class="logo"><img src="img/logo_jaeaess_glitch.png" alt="Logo of the
浏览 0
提问于2019-08-02
得票数 0
回答已采纳
1
回答
在除firefox之外的传统浏览器上使用scroll事件设置css动画的奇怪行为
css
、
browser
、
scroll
、
css-transitions
、
css-grid
我正在使用css网格制作一个简单的图库,并且当用户向下滚动时,我试图使项目之间的间隙具有动画效果。但我不知道为什么我会在chrome和edge上出现这种奇怪的行为,当我尝试滚动时,每一项都会随着高度的增加而缩小。它在firefox中运行得很好,幕后的一切似乎都运行得很好,我没有得到任何错误,我在我的css上尝试了autoprefixer,但它没有任何帮助。 <div class="container" id="container"> ...images goes here (sm,md,lg classes) </div> .co
浏览 17
提问于2020-06-04
得票数 3
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
CSS-常见布局介绍
一行 CSS 代码实现响应式布局,使用 Grid 实现的响应式布局
一行 CSS 代码实现响应式布局–使用 Grid 实现的响应式布局
使用圆锥渐变和CSS自定义属性创建一个Range Input控制的环形图
在这3年开发中遇到的 CSS 问题及解决方案,有大佬帮他总结好了
热门
标签
更多标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
活动推荐
运营活动
广告
关闭
领券