Question

＆＃13;

  body {
    background-color: #FFFFFF;
  }
  
  .green {
    background-color: hsl(120, 100%, 50%);
  }
  
  .cyan {
    background-color: 	hsl(180, 100%, 50%);
  }
  
  .blue {
    background-color: 	hsl(240, 100%, 50%);
  }
  
  div {
    display: inline-block;
    height: 100px;
    width: 100px;
  }

  div.main {background-color:red;}

＆＃13;

   <div>
  <div class="main">
<div class="green"></div>
<div class="cyan"></div>
<div class="blue"></div>
  </div>
  </div>

＆＃13;

我的div背景应该是红色但不是这样做的。我做错了什么，因为我真的不知道为什么背景颜色：红色;似乎不起作用？

Answer 1

提示：尝试使用Inspector查找是否实际有效

background-color: red;

工作正常，如果您为其他人禁用背景颜色，您可以看到它是红色的，但其他div和它们的背景会阻挡红色。

你也将每个div定义为100px * 100px，这包括你的主div，因此它只有与其他div一样大，即使它包含所有其他div。

Answer 2

它正在运行，但您正面临溢出问题，因为您为所有 div设置了固定的width / height 。所以主要的div与第一个孩子的身高相等。将其高度更改为自动以避免这种情况，您将看到红色。

＆＃13;

body {
  background-color: #FFFFFF;
}

.green {
  background-color: hsl(120, 100%, 50%);
}

.cyan {
  background-color: hsl(180, 100%, 50%);
}

.blue {
  background-color: hsl(240, 100%, 50%);
}

div {
  display: inline-block;
  height: 100px;
  width: 100px;
}

div.main {
  background-color: red;
  height:auto;
}

＆＃13;

<div>
  <div class="main">
    <div class="green"></div>
    <div class="cyan"></div>
    <div class="blue"></div>
  </div>
</div>

＆＃13;

你也可以删除额外的div并将.main元素放回一个具有自动宽度的块：

＆＃13;

body {
  background-color: #FFFFFF;
}

.green {
  background-color: hsl(120, 100%, 50%);
}

.cyan {
  background-color: hsl(180, 100%, 50%);
}

.blue {
  background-color: hsl(240, 100%, 50%);
}

div {
  display: inline-block;
  height: 100px;
  width: 100px;
}

div.main {
  background-color: red;
  height: auto;
  width:auto;
  display:block;
}

＆＃13;

<div class="main">
  <div class="green"></div>
  <div class="cyan"></div>
  <div class="blue"></div>
</div>

＆＃13;

Answer 3

需要高度和宽度

  body {
    background-color: #FFFFFF;
  }

  .green {
    background-color: hsl(120, 100%, 50%);
  }

  .cyan {
    background-color:   hsl(180, 100%, 50%);
  }

  .blue {
    background-color:   hsl(240, 100%, 50%);
  }

  div {
    display: inline-block;
    height: 100px;
    width: 100px;
  }

.main {
  background-color:red;
  width:auto;
  height:auto
  }

Answer 4

您还必须为main类赋予高度，以便定义div类的工作区域。使用height:auto;时，它会自动修正类的高度。您也可以在px或%中使用高度。此外，如果您想在同一行显示div类，请使用display:block;或display:flex;

 body {
    background-color: #FFFFFF;
  }
  
  .green {
    background-color: hsl(120, 100%, 50%);
  }
  
  .cyan {
    background-color: 	hsl(180, 100%, 50%);
  }
  
  .blue {
    background-color: 	hsl(240, 100%, 50%);
  }
  
  div {
    display: inline-block;
    height: 100px;
    width: 100px;
  }

  div.main {
    background-color:red;
    height: auto;
    width: auto;
    }

 <div>
  <div class="main">
<div class="green"></div>
<div class="cyan"></div>
<div class="blue"></div>
  </div>
  </div>

为什么我的第一个div背景不是红色的

4 个答案: