html - float 底部和向上

Question

我正在尝试使用 CSS 使 html 中更下方的代码显示在其上方的代码之上。

基本上我的html是这样的:

<div class="showbelow">
show below
</div>

<div class="showabove">
show above
</div>

我希望 showabove div 显示在 showbelow div 上方，尽管在 html 中它位于它下方。有没有办法在 css 中不使用负边距？例如。给 showabove 一个负的上边距，而 show below 一个正的上边距？两个 div 都是容器的 100%。

提前致谢:)

Answer 1

有一个属性order使用 flexbox 将元素放置在特定位置。

请看下面的例子:

.container {
  display:flex;
  flex-direction:column;
}
.container div {
  border:1px solid red;
}
.showabove {
  order:1;
}
.showbelow {
  order:2;
}

<div class="container">
  <div class="showbelow">show below</div>
  <div class="showabove">show above</div>
</div>

Flex items are, by default, displayed and laid out in the same order as they appear in the source document. The order property can be used to change this ordering.
https://drafts.csswg.org/css-flexbox-1/#order-property

小心使用 order:-1!

.container {
  display:flex;
  flex-direction:column;
}
.container div {
  border:1px solid red;
}
.showabove {
  order:-1;
}

<div class="container">
  <div class="showbelow">show below</div>
  <div class="showmiddle">show middle</div>
  <div class="showabove">show above</div>
</div>

说明: order:-1 将元素设置在容器的第一个位置，因为所有其他元素默认为 order:0。它不会将元素移到上一个元素之前!在您的情况下，此解决方案有效，但如果您添加更多元素，则可能会出现问题，您必须像上面的示例一样为容器上的每个元素设置 order。