为什么背景颜色不能用于内联网格
Has*_*ash 6 html css css3 css-grid
我创建了两个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>输出是:
如何为内联网格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>发生这种情况是因为display: inline-grid;是一个inline元素
基本上，内联元素不会导致换行（从新行开始），并且不会占用页面的整个宽度，仅占用其开始和结束标记所限定的空间。它通常用在其他 HTML 元素中。
如果您愿意，可以在您的情况下使用一些附加样式作为示例来为其着色width:100%;：
#inline {
display: inline-grid;
width:100%;
}
#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>