Question

我正在尝试在DIV元素上应用背景色。由于DIV的子项向左浮动，因此我假设两个子项都在DIV容器中。

但是，如果我在DIV容器中添加position：absolute，我可以看到预期的结果。但是我还是不明白，它与绝对位置有什么区别。

<style>
        span {
          float: left;
          padding: 10px;
        }
        div {
          border: 1px solid #ccc;
          background-color: yellow;
          left: 200px;
        }

</style>
<div>
    <span>Span A</span>
    <span>Span B</span>
</div>

Answer 1

在您的情况下，您将它们浮动到float:left上，则没有为此应用height <div>。我建议您对display:inline-block使用<span>，以使它们与块大小对齐。在这种情况下，无需使用浮点数

默认情况下，span具有display:inline属性

使用浮点数。您的代码的解决方案。

span {
  float: left;
  padding: 10px;
}

div {
  border: 1px solid #ccc;
  background-color: yellow;
  left: 200px;
  height:100px
}

<div>
  <span>Span A</span>
  <span>Span B</span>
</div>

您可以使用display:inline-block而不是float

span {
  display:inline-block;
  padding: 10px;
}

div {
  border: 1px solid #ccc;
  background-color: yellow;
  left: 200px;

}

<div>
  <span>Span A</span>
  <span>Span B</span>
</div>

Answer 2

您的div具有背景颜色，但是由于跨度设置为float，因此其父级不采用其宽度/高度：现在没有宽度和高度。

您可能想在float: left元素上使用display: inline-block而不是span。像这样：

span {
  padding: 10px;
  display: inline-block;
}
div {
  border: 1px solid #ccc;
  background-color: yellow;
  left: 200px;
}

<div>
  <span>Span A</span>
  <span>Span B</span>
</div>

另一种解决方案是为父div赋予属性display: table。因为父级随后将获得其子级的宽度/高度（除非绝对定位）。像这样：

span {
  padding: 10px;
  float: left;
}
div {
  border: 1px solid #ccc;
  background-color: yellow;
  display: table;
}

<div>
  <span>Span A</span>
  <span>Span B</span>
</div>

Answer 3

因为显示了span标签，所以删除了span中的浮点数：默认为内联，并且没有对span应用固定的宽度。

<style>

    span {
      padding: 10px;
    }
    div {
      border: 1px solid #ccc;
      background-color: yellow;
      left: 200px;
    }

</style>

    <div>
      <span>Span A</span>
      <span>Span B</span>
    </div>

Answer 4

您缺少div标签的height和width属性

<style>

span {
  float: left;
  padding: 10px;
}
div {
  border: 1px solid #ccc;
  background-color: yellow;
  left: 200px;
  height: 100px;
  width: 300px
}

</style>

  <div>
    <span>Span A</span>
    <span>Span B</span>
  </div>

为什么背景色不适用于DIV容器？

4 个答案: