圣诞树动画

Question

theblackpost

Asked:2020-10-12 19:28:31 +0000 UTC2020-10-12 19:28:31 +0000 UTC 2020-10-12 19:28:31 +0000 UTC

向下移动块 CSS

告诉我如何在.rmenu之后移动块<P> .text_block：

HTML：

<div class="content">
    <div class="rmenu"></div>
    <div class="text_block"></div>
    <p>some text</p>
</div>

CSS：

.rmenu {
    position: absolute;
    left: 990px;
    top: -2px;
}
.text_block {
    width: 100%!important;
}

也就是说，在 css 上，确保块.rmenu在标记之后视觉上出现<p>

Nilsan · Answer 1 · 2020-10-12T19:53:53Z

Best Answer

Nilsan

.content {
  display: flex;
  flex-direction: column;
}

.content p {
  order: 1;
}

.rmenu {
  order: 3;
}

.text_block {
  order: 2;
}

<div class="content">
  <div class="rmenu">b1</div>
  <div class="text_block">b2</div>
  <p>some text</p>
</div>

作为 flex 和 order 的示例。和他一起试试。

根据您的示例，完全不清楚为什么此处需要绝对位置以及此处是否需要绝对位置。但是如果你可以不用它，那么这个选项是合适的。