html - 仅使用 CSS 使元素出现在另一个元素之后

Question

我有以下 HTML:

<h2 class="brand> </h2>
..
.. (lots of other elements like <img, p, h2 etc) 
..

<div class="reviews">...</div>

如何使用 CSS 使类为“reviews”的 div 元素出现在类为“brand”的 h2 元素之后。像这样:

<h2 class="brand> </h2>
<div class="reviews">...</div>
..
.. (lots of other elements like <img, p, h2 etc) 
..

更新:我能够将 margin-top 设置为负数以使其出现在我想要的位置，但现在它看起来像是漂浮在事物之上。我使用了 display:block 但它似乎仍然漂浮在事物之上。我想让它占据空间。

负边距显示不正确，因为不同的屏幕尺寸会有不同的负边距，并且它们显示在不同的位置。

谢谢!

Answer 1

你可以使用 flexbox。它介绍了 order允许您重新排序 flex 元素的属性:

#wrapper {
  display: flex;          /* Magic begins */
  flex-direction: column; /* Column layout */
}
#wrapper > .brand ~ :not(.reviews) {
  order: 1;               /* Move to the bottom */
}

<div id="wrapper">
  <h2 class="brand">Title</h2>
  <p>Paragraph</p>
  <div>Div</div>
  <div class="reviews">Reviews</div>
</div>