html - 有没有办法将最后一个 div 放在第一个之上而不重叠 div

Question

我有一个上传脚本，可以在 class="download"的 div 中显示所有已上传的图片

当我使用 jquery 脚本添加更多图片时，它会将这些图像添加到带有 class="upload"的 div 中

我想将这些上传内容显示在带有 class="download"的 div 上方

但是代码自动把它放到了下面

我知道一定有一种方法可以使用 css，但我似乎无法让它工作

<div id="files" class="files">
<div id="download" class="download"></div>
<div id="download" class="download"></div>
<div id="download" class="download"></div>
<div id="download" class="download"></div>
<div id="download" class="download"></div>
<div id="upload" class="upload"></div>
<div id="upload" class="upload"></div>
<div id="upload" class="upload"></div>
</div>

Answer 1

您可以将 flexbox 与 order 一起使用解决这个问题。如果混合上传和下载并且保留元素的原始顺序(先上传仍然是先上传)，此解决方案也适用。

.files {
  display:flex;
}
.files .download {
  order:2;
}
.files .upload {
  order:1;
}

<div id="files" class="files">
  <div id="download" class="download">1.1</div>
  <div id="download" class="download">1.2</div>
  <div id="download" class="download">1.3</div>
  <div id="download" class="download">1.4</div>
  <div id="download" class="download">1.5</div>
  <div id="upload" class="upload">2.1</div>
  <div id="upload" class="upload">2.2</div>
  <div id="upload" class="upload">2.3</div>
  <div id="download" class="download">1.6</div>
  <div id="download" class="download">1.7</div>
  <div id="upload" class="upload">2.4</div>
  <div id="upload" class="upload">2.5</div>
</div>