使用CSS（Crocodoc）更改DOM元素顺序 [英] Changing DOM element order with CSS (Crocodoc)
问题描述
是否可以使用CSS更改DOM元素顺序？我有一个iframe，其中我想将工具栏从上方更改为以下 iframe的主要内容。
Is it possible to change DOM element order with CSS? I have an iframe where I'd like to change the toolbar from above to below the iframe's main content.
所以从这里：
<iframe>
<html>
<body>
<div id='toolbar'></div>
<div id='main_content'></div>
<div id='other_stuff'></div>
</body>
</html>
</iframe>
到此：
<iframe>
<html>
<body>
<div id='main_content'></div>
<div id='toolbar'></div>
<div id='other_stuff'></div>
</body>
</html>
</iframe>
如果这是不可能使用CSS，有人可以建议如何在Javascript中做这个？操作iframe内容总是混淆我的* ^％$。作为一个实际应用，我实际上指的是使用Crocodoc生成的 iframe（https：// crocodoc .com / docs / walkthrough / skinning /），所以我的目的是让这个问题和答案对那些使用这项服务也很有价值。
If this is not possible using CSS, can someone advise on how to do this in Javascript? Manipulating iframe contents always confuse the *^%$ out of me. As a practical application, i'm actually referring to the iframe that is generated with Crocodoc (https://crocodoc.com/docs/walkthrough/skinning/) so my intent is to make this question and answer valuable to those using this service too.
推荐答案
我迟到了，但我只想让你们知道你真的可以改变DOM顺序CSS单独。
I'm quite late to the party but I just want to let you guys know you actually can change the DOM order with CSS alone.
虽然这样做，我们必须使用CSS3 flexbox语法。所以基本上IE10 +，在我的情况下经常不是一个问题，因为我使用它来操纵网站的手机。
Although to do this we have to use the CSS3 flexbox syntax. So basically IE10+, in my case often not a problem as I use it to manipulate sites for mobile.
那么我们如何做呢？
父级需要成为flexbox元素。例如：
So how do we do it? The parent needs to become a flexbox element. Eg:
（此处仅使用webkit供应商前缀。css令人眼花缭乱，因为没有它）
(only using the webkit vendor prefix here. The css is dazzling as it is without it)
#main {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
然后，通过指示其顺序来交换div：
Then, swap divs around by indicating their order with:
#main > div#one{
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
overflow:visible;
}
#main > div#two{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
祝你好运！
这篇关于使用CSS（Crocodoc）更改DOM元素顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
