Question

我正试图让黑匣子进入蓝框。据我所知，黑匣子与红匣子在同一个容器内;因此，黑盒子应该在蓝框中。

/* Containers */

main.container {
  height: 40em;
  width: 70%;
  top: 5em;
  background-color: orange;
}

section.bluebox {
  height: 10em;
  width: 100%;
  background-color: blue;
}

figure.redbox {
  height: 10em;
  width: 24%;
  margin: 0;
  padding: 0;
  background-color: red;
}

summary.blackbox {
  height: 10em;
  width: 62%;
  margin: 0;
  padding: 0;
  background-color: black;
}


/* Styles */

summary.blackbox p {
  color: white;
  padding: 0;
  margin: 0;
}

<main class="container">
  <section class="bluebox">
    <figure class="redbox">
      <p> FIGURE </p>
    </figure>
    <summary class="blackbox">
      <p> SUMMARY </p>
    </summary>
  </section>
</main>

Answer 1

根据<figure>元素的当前HTML Standard：

figure元素表示一些流内容，可选地带有标题，是自包含的（如完整的句子），通常从文档的主流中引用为单个单元。

这是大多数浏览器的解释，更重要的是，广泛使用的浏览器：

figure { 
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

显示block会使其占据100%宽度并推送其他“块级项目”，例如<summary>。线。下方。

有多种方法可以达到预期效果。但是，使用最少量的代码执行此操作

figure {float: left}

main.container {
  height: 40em;
  width: 70%;
  top: 5em;
  background-color: orange;
}

section.bluebox {
  height: 10em;
  width: 100%;
  background-color: blue;
}

figure.redbox {
  height: 10em;
  width: 24%;
  margin: 0;
  padding: 0;
  background-color: red;
}

summary.blackbox {
  height: 10em;
  width: 62%;
  margin: 0;
  padding: 0;
  background-color: black;
}


/* Styles */

summary.blackbox p {
  color: white;
  padding: 0;
  margin: 0;
}

figure {float: left;}

<main class="container">
  <section class="bluebox">
    <figure class="redbox">
      <p> FIGURE </p>
    </figure>
    <summary class="blackbox">
      <p> SUMMARY </p>
    </summary>
  </section>
</main>

如果你想让红色和黑色的盒子填充蓝色，我个人推荐使用flexbox，但这完全取决于个人喜好（还有其他多种方法可以实现）：

section { 
  display: flex;
}
section > figure, section > summary {
  flex-grow: 1;
}

.container {
  min-height: 100vh;
  width: 70%;
  background-color: orange;
}

.bluebox {
  min-height: 10em;
  width: 100%;
  background-color: blue;
}

.redbox {
  width: 24%;
  max-width: 24%;
  background-color: red;
}

.blackbox {
  background-color: black;
}
figure, summary, body {
  margin: 0;
  padding: 0;
}
p {
  padding: 0 1rem;
}

/* Styles */

.blackbox p {
  color: white;
}

section { 
  display: flex;
}
section > figure, 
section > summary {
  flex-grow: 1;
}
* {
  box-sizing: border-box;
}

<main class="container">
  <section class="bluebox">
    <figure class="redbox">
      <p> FIGURE </p>
    </figure>
    <summary class="blackbox">
      <p> SUMMARY </p>
    </summary>
  </section>
</main>

在最后一个例子中，我冒昧地解释了你的意图，并将你的CSS重新编码为我认为最佳做法，尽可能少做假设。
请注意，它不是生产就绪的，它应该在部署之前加上前缀。

Answer 2