CSS 在父 DIV 中如何使第二个 DIV 自动填充空白部分

在本文中，我们将介绍使用 CSS 实现在父 DIV 中使第二个 DIV 自动填充空白部分的方法。

首先，我们需要创建一个父 DIV，并为其设置一个固定的宽度和高度。然后，在父 DIV 中创建两个子 DIV，分别为第一个子 DIV 和第二个子 DIV，并给它们设置宽度和高度。

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

接下来，我们可以使用 CSS 的 display 属性和 float 属性来实现第二个子 DIV 自动填充父 DIV 的空白部分。

.parent {
  position: relative;  /* 设置父 DIV 的相对定位 */
  width: 500px;
  height: 300px;
  border: 1px solid #000;
}

.child1 {
  width: 300px;
  height: 100%;
  float: left;  /* 第一个子 DIV 使用 float: left；让第二个子 DIV 自动填充其右侧空白部分 */
  background-color: red;
}

.child2 {
  height: 100%;
  background-color: blue;
}

在上面的示例代码中，我们将第一个子 DIV 的宽度设置为 300px，并使用 float: left 让其向左浮动。这样，第二个子 DIV 就会自动填充父 DIV 中第一个子 DIV 右侧的空白部分。

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

现在，第二个子 DIV 会自动填充父 DIV 的右侧空白部分，并且高度与父 DIV 相同。

阅读更多：CSS 教程

总结

通过以上的示例和方法，我们可以在 CSS 中实现在父 DIV 中使第二个 DIV 自动填充空白部分的效果。使用 float: left 属性可以让第一个子 DIV 向左浮动，从而使第二个子 DIV 能够自动填充其右侧的空白部分。这种方法可以很好地实现页面布局的自适应效果，提高了网页的美观性和可读性。希望本文的内容对您有所帮助！