重新排序Divs

问题描述

例如，我想让div按顺序显示＃div2，＃div1，＃div3，但在HTML中，它们是：

 < div id =＃div1>< / div& 
< div id =＃div2>< / div> 
< div id =＃div3>< / div> 
  

$ b

谢谢！

解决方案

没有用css重新排序元素的方法。

你可以通过将它们全部向右移动来水平地反转它们的顺序。或者你可以相对于body或者其他包含元素来定位它们 - 但是对于元素的大小以及相对于页面上的其他元素的定位有严格的限制。

简短的答案：你只能在非常有限的情况下实现这一点。重新排序元素最好在标记中完成。

如果您无法控制html，可以使用javascript。这里使用jQuery：

  $（＃div2）。insertAfter（＃div3）; 
 $（＃div1）。prependTo（＃div2）; 
  

我当然不建议，除非你的手被绑。这将是更难维护，并为您的最终用户，它会使您的页面设置页面时，它的页面。

How would I go about reordering divs without altering the HTML source code?

example, I want divs to appear in order #div2, #div1, #div3, but in the HTML they are:

<div id="#div1"></div>
<div id="#div2"></div>
<div id="#div3"></div>

Thanks!

解决方案

There is no catch-all way of reordering elements with css.

You can inverse their order horizontally by floating them all to the right. Or you can position them absolutely relative to the body or some other containing element - but that comes with severe limitations regarding the size of the elements, and positioning relative to other elements on the page.

Short answer: You can only achieve this in a very limited set of circumstances. Reordering elements is best done in markup.

If you have no control over the html, you could use javascript. Here using jQuery:

$("#div2").insertAfter("#div3");
$("#div1").prependTo("#div2");

I certainly don't recommend that unless your hands are tied. It will be harder to maintain, and for your end users it will make your page "jerk around" while its setting up the page.

这篇关于重新排序Divs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！