时间戳

首页 > 解决方案 > 有没有办法将最后一个 div 放在第一个上而不重叠 div

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

问题描述

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

当我使用 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>

标签： htmlcss

解决方案

You can use flexbox with order to solve this. This solution also works in case the uploads and downloads are mixed and the original order of elements is retained (first upload remains first upload).

.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>

推荐阅读