css - 为什么 div 继续占据父级的 100%，即使它具有 50% 的显式宽度

Question

我在它们的父 div 中有两个 div:

<div>
  <div class="col-1"></div>
  <div class="col-2"></div>
</div>

.col-1, .col-2 {
  width: 50%;
}

它们的宽度均为 50%。然而，尽管他们的背景确实是 parent 的 50%，但他们继续占据 parent 的 100%。为什么会这样？

Answer 1

div 需要被视为一个分区，除非您告诉它 float ，否则它将占据一条线的所有宽度，即使它可能不会填充它，这是因为应用于 div 的固有 css 属性 display:block。如果您通过将 float:left; 或 float:right; 添加到它们的 css 来告诉两个 div float ，它们将允许其他元素共享其父元素的宽度。这是它的外观的一个片段(您可以通过单击运行按钮查看结果)

#container .child{
  width:50%;
  float:left;
}

.red{background:red;}
.blue{background:blue}

<div id='container'>
  <div class='child red'>a</div>
  <div class='child blue'>b</div>
</div>