css - 我的容器不会进入其父容器

Question

我试图让黑盒子进入蓝盒子。据我所知，黑盒子和红盒子在同一个容器里；因此黑盒子应该在蓝盒子里。

http://codepen.io/VK72m/pen/yMJLRZ

/* 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

根据当前 HTML Standard 在 <figure>元素:

The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.

它被大多数浏览器解释，更重要的是，被广泛使用的浏览器解释为:

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

显示 block会让它占据100%的宽度并插入每隔一个“ block 级元素”，例如<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融入我认为的最佳实践，尽可能少地做出假设。
请注意，它尚未准备好生产，应在部署前添加前缀。