Question

我创建了两个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着色？

Answer 1

作为内联元素，其宽度由其内容定义。但是这里没有内容。

只需添加宽度：

#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>

Answer 2

发生这种情况是因为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>

Answer 3

只需向您的部门添加一个“宽度”属性：

#inline {
  display: inline-grid;
  width: 100%;
}

Answer 4

我刚刚在#inline css中添加了width属性，现在可以正常工作了。

#inline {
  display: inline-grid;
  width: 100%;
}

Answer 5

您必须知道为什么要使用任何显示类型以及何时使用它，这是获得所需结果的最佳方法

CSS网格布局模块

.grid-container {
  display: grid;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
  text-align: center;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
}

<div class="grid-container" style="grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';">
  <div class="grid-item" style="grid-area: header">
    <h3>Header</h3>
  </div>
  <div class="grid-item" style="grid-area: menu">
    <h3>Menu</h3>
  </div>
  <div class="grid-item" style="grid-area: main">
    <h3>Main</h3>
  </div>
  <div class="grid-item" style="grid-area: right">
    <h3>Right</h3>
  </div>
  <div class="grid-item" style="grid-area: footer">
    <h3>Footer</h3>
  </div>
</div>

网格布局

CSS网格布局模块提供了基于网格的布局系统，具有行和列，可以更轻松地设计网页而无需使用浮动和定位。

More info ->

为什么背景色在嵌入式网格中不起作用

5 个答案: