使用CSS重新排序DIV [英] Use CSS to reorder DIVs

查看:108
本文介绍了使用CSS重新排序DIV的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

给定一个模板,其中由于其他要求不能修改HTML,如何在另一个 div上显示(重新排列) div 当它们不是在HTML中的顺序? div 包含高度和宽度不同的数据。

Given a template where the HTML cannot be modified because of other requirements, how is it possible to display (rearrange) a div above another div when they are not in that order in the HTML? Both divs contain data that varies in height and width.

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

希望结果很明显:

Content to be above in this situation
Content to be below in this situation
Other elements

当尺寸固定时,很容易将它们放在需要的位置,但是当内容可变时,我需要一些想法。对于这种情况,请考虑两者的宽度为100%。

When the dimensions are fixed it easy to position them where needed, but I need some ideas for when the content is variable. For the sake of this scenario, please just consider the width to be 100% on both.

编辑:CSS解决方案是最理想的解决方案。感谢您提供的Javascript选项。没有过于冗长的什么或为什么(或谁)...我专门寻找一个CSS的唯一解决方案(如果没有泛化,它可能需要满足其他解决方案)。

A CSS solution is the most ideal solution. Thank you for the Javascript options mentioned. Without getting too wordy about what or why (or who) ... I am specifically looking for a CSS only solution (and it will probably have to be met with other solutions if that doesn't pan out).

另一个...还有其他元素。我提到一个好的建议,因为我展示的有限场景 - 因为它可能是最好的答案,但我也希望确保后面的元素不会受到影响。

One more ... there are other elements following this. A good suggestion was mentioned given the limited scenario I demonstrated -- given that it might be the best answer, but I am looking to also make sure elements following this aren't impacted.

推荐答案

解决方案仅使用CSS并适用于变量内容

This solution uses only CSS and works with variable content

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }

这篇关于使用CSS重新排序DIV的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆