有没有办法将最后一个div放在第一个的顶部，而不与div重叠？
有没有办法将最后一个div放在第一个的顶部，而不与div重叠？
提问于 2019-08-14 07:46:27
我有一个上传脚本，用class=“下载”显示div中所有已经上传的图片。
当我用jquery脚本添加更多图片时，它会用class="upload“在div中添加这些图片。
这些上传我想显示上面的div与class=“下载”
但是代码自动地将其放在下面
我知道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>回答 2
Stack Overflow用户
回答已采纳
发布于 2019-08-14 07:49:12
您可以使用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>
Stack Overflow用户
发布于 2019-08-14 07:56:48
您可以使用css将其应用于父级：
.files {
display: flex;
flex-direction: column-reverse;
}这将应用flex布局规则，并将它们显示在反列中。
一个更健壮的解决方案可能是让脚本prepend映像，而不是append对它们进行处理。如果您可以访问该脚本，并且由于您已经提到了jQuery，那么您可以查看以下方法：
它们以不同的方式工作，但两者都允许您将元素预先添加到其他元素中。根据脚本的工作方式，您可以尝试它们中的任何一个。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57490280
复制相关文章
相似问题
腾讯云开发者
