html - 如何使用 CSS 将标题 (h2) 移动到图形和图像下方？

Question

我在练习 CSS 时偶然发现了一个小问题。我有一个带有标题(h2)和一个数字的文章标签。我想将标题移动到图形标签下方。

我尝试将标题向右浮动，但效果很好，但问题是我无法将其置于图形下方。当我显然将图形变小以便标题适合时，但我想如果我将它的宽度做得足够大，它会压低标题。不，标题只是跨越，就像它覆盖了这个数字。

article h2 {
    text-align: center;
    color: #405377;
    padding: 1em;
    clear:both;
    }

    article figure {
    background: #ebe3ff
    }

    article img {
    display: block;
    max-width: 25em;
    min-width: 5em;
    max-height: 13em;
    margin-left: auto;
    margin-right: auto;
    }

<h2>Headline</h2>
<figure>
 <img src=""alt="image">
 <figcaption>text</figcaption>
</figure>
<p>Text text</p>

Answer 1

如果您在容器上使用 order: -1; 并在容器上使用 display: flex;，这将使该元素位于顶部。

div {
  display: flex;
  flex-direction: column;
}

h2 {
  text-align: center;
  color: #F9F9FA;
  background: #a8a8ff;
  padding: 1em;
}
figure {
  background: #ebe3ff;
  order: -1;
}
img {
  display: block;
  max-width: 25em;
  min-width: 5em;
  max-height: 13em;
  margin: 0 auto;
}

<div>
<h2>Headline</h2>
<figure>
 <img src="#"/>
 <figcaption>text</figcaption>
</figure>
<p>Text text</p>
</div>