为什么背景颜色不能在内联网格中工作答案

【问题标题】：Why don't background colors work in inline-grids为什么背景颜色不能在内联网格中工作
【发布时间】：2018-08-11 15:59:53
【问题描述】：

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

输出是：

如何为 inline-grid div 中的 div 着色？

【问题讨论】：

您的输出图像实际上并未显示，可能需要查看一下

标签： html css css-grid

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

只需为您的分区添加一个“宽度”属性：

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

【讨论】：

【解决方案4】：

我刚刚在#inline css 中添加了 width 属性，现在可以使用了。

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

【讨论】：

【解决方案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 ->

【讨论】：