我有以下 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 但它似乎仍然漂浮在事物之上。我想让它占据空间。
负边距显示不正确,因为不同的屏幕尺寸会有不同的负边距,并且它们显示在不同的位置。
谢谢!
最佳答案
你可以使用 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>
关于html - 仅使用 CSS 使元素出现在另一个元素之后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31274251/