Почему мой первый фон div не красный

Question

  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;}

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

Мой div-фон должен быть красным, но он этого не делает.Я сделал ошибку или что-то, потому что я буквально не знаю, почему делает цвет фона: красный;не похоже на работу?

Answer 1

Вы также должны задать высоту классу 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>

Answer 2

Это работает, но вы столкнулись с проблемой переполнения , потому что вы установили фиксированное width / height для всех делений.Таким образом, главный div равен по высоте своему первому потомку.Измените его высоту на автоматический, чтобы избежать этого, и вы увидите красный цвет.

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;
}

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

Вы также можете удалить дополнительный div и вернуть элемент .main на один блок с автоматической шириной:

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;
}

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

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

Совет: попробуйте использовать Инспектор, чтобы выяснить, работает ли он на самом деле или нет

background-color: red;

работает просто отлично, если вы отключите цвет фона для других, вы увидите, что он красный,но остальные div и их фон мешают красному.

также вы определили каждый div как 100px * 100px, это включает ваш основной div, следовательно, он такой же большой, как и остальные, даже если он содержит все остальные.