gpt4 book ai didi

html - 为什么背景颜色在内联网格中不起作用

转载 作者:太空狗 更新时间:2023-10-29 14:48:34 26 4
gpt4 key购买 nike

我创建了两个 div;一个具有 display:inline-grid 属性,另一个具有 display:grid 属性。我想对两个 div 的子元素应用背景颜色,但是具有 display:inline-grid 属性的 div 没有为其元素着色。

HTML 和 CSS 代码

#inline {
display: inline-grid;
}

#block {
display: grid;
}

div div {
height: 50px;
}

div div:nth-child(1n) {
background-color: green;
}

div div:nth-child(2n) {
background-color: rebeccapurple;
}

div div:nth-child(3n) {
background-color: aquamarine;
}
<body>
<div id="inline">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="block">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>

输出是: enter image description here

如何为内联网格 div 中的 div 着色?

最佳答案

作为内联元素,它的宽度由它的内容决定。但是这里没有内容。

只需添加宽度:

#inline {
display: inline-grid;
width: 150px;
}

#block {
display: grid;
}

div div {
height: 50px;
}

div div:nth-child(1n) {
background-color: green;
}

div div:nth-child(2n) {
background-color: rebeccapurple;
}

div div:nth-child(3n) {
background-color: aquamarine;
}
<body>
<div id="inline">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="block">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>

关于html - 为什么背景颜色在内联网格中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51797561/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com